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的大家庭吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。