react依赖注入之mapStateToProps&&mapDi

在react-redux开发中每个模块有自己的state用来统一管理视图数据。
在使用react-redux之后，可以使用其核心APIProvider使得其所包裹的组件都有能力获取到store中的内容

// 在src下面中的index.js引入 Provider
import { Provider } from "react-redux";

const App =(
  <Provider store ={store}>
    <TodoList />
</Provider>
)
ReactDOM.render(App, document.getElementById("root"))

如上所述，TodoList组件就可以直接获取到store中定义的数据

将需要的state的节点注入到与此视图数据相关的组件上时，在使用reac-redux库的核心API connect()方法生成容器组件前，需要先定义mapStateToProps(),这个函数是把stroe中的state映射到展示组件的props中。

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list,
  };
};

将需要绑定的响应事件注入到组件上时，可以定义mapDispatchToProps()方法接收dispatch()方法并返回期望注入到展示组件的props中的回调方法，可以是一个函数，也可以是一个对象。

const mapDispatchToProps = (dispatch) => {
  handleInputChange(e) {
     const action = {
       type: CHANGE_INPUT_VALUE,
       value: e.target.value,
       };
      dispatch(action);
    },
}

导出容器组件

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);