case INPUT_CHANGED:
return Object.assign(
{},
state,
{newToDo: action.value}
);
在 toDoAppContainer.js 的 mapDispatchToProps 函数就需要返回相应的action,首先导入 inputChange, 具体代码如下:
import { connect } from 'react-redux';
import ToDoApp from '../components/ToDoApp.js'
import {
inputChange
} from '../redux/modules/toDoApp'; // we added this
function mapStateToProps(state) {
return {
toDoApp: state.toDoApp // gives our component access to state through props.toDoApp
}
}
function mapDispatchToProps(dispatch) {
return {
inputChange: (value) => dispatch(inputChange(value)) // we added this
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ToDoApp);
这样state和action都传递给了toDoApp然后再通过props传递给子组件就可以使用了,具体都可以看项目最终代码。
4. 其他 actions
其他acitons的代码模式跟上面的基本一样,这里不在赘述。
总结
到这里一个使用webpack打包的react+redux(ducks)的基本应用模型就出来了,虽然简单但是是我们进行更复杂项目的基础,并且有了这些基础后面的路程将会顺畅多了,一起加入react的大家庭吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。
