要解决ASP.NET Core React-with-Redux模板派发问题,可以按照以下步骤进行操作:
npm install react react-dom redux react-redux redux-thunk
connect
函数连接Redux Store并将派发的操作映射到组件的props中。例如:import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// 导入要派发的操作
import { incrementCounter } from '../actions';
class MyComponent extends React.Component {
render() {
return (
);
}
}
// 将派发的操作映射到组件的props中
const mapDispatchToProps = dispatch => bindActionCreators({
incrementCounter
}, dispatch);
// 连接Redux Store并将派发的操作映射到组件的props中
export default connect(null, mapDispatchToProps)(MyComponent);
actions.js
文件中:// 定义一个增加计数器的操作
export const incrementCounter = () => {
return {
type: 'INCREMENT_COUNTER'
};
};
reducers.js
文件中:// 定义一个处理计数器增加的Reducer
const counterReducer = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT_COUNTER':
return state + 1;
default:
return state;
}
};
export default counterReducer;
store.js
文件中:import { createStore } from 'redux';
import counterReducer from './reducers';
// 创建Redux Store并应用Reducer
const store = createStore(counterReducer);
export default store;
index.js
文件中:import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
这样,当点击组件中的按钮时,派发的操作incrementCounter
将自动触发并更新Redux Store中的状态。