从零开始搭建一个react项目开发(12)

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的大家庭吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/205.html