React(mapDispatchToProps与mapStat

mapDispatchToProps和mapStateToProps 用于维护组件与Store间状态的同步

mapDispatchToProps

• dispatch是必须的参数
• mapDispatchToProps在组件constructor()中被执行，因而只执行一次
• mapDispatchToProps为组件提供了用于改变Store状态的方法，并将其定义为组件的prop

const mapDispatchToProps = (dispatch) => {
  alert('Dispatch')
  return {
    onToggleTodo: (id) => {
      dispatch(toggleTodo(id));
    },
    onRemoveTodo: (id) => {
      dispatch(removeTodo(id));
    }
  };
};

• mapDispatchToProps 也可以内容与Store，dispatch无关，用于为组件设置一个函数属性，该函数参数由父组件传给子组件

父组件

return (<chil
           name='123'
           />)

子组件

return (
<button onClick={onRemove}>删除</button>
<button onClick={onToggle}>切换</button>)
......
......
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
   onToggle:()=>{alert(ownProps.name+'被切换了')},
   onRemove:()=>{alert(ownProps.name+'被删除了')}
  };
};

• mapDispatchToProps 甚至可以只是单纯地用于为组件设置一个函数属性
  (注意这个属性不是父组件传给子组件的，而是子组件自己在mapDispatchToProps中设置的)

return (
<button onClick={onRemove}>删除</button>
<button onClick={onToggle}>切换</button>)
.......
const mapDispatchToProps = () => {
  return {
   onToggle:()=>{alert('被切换了')},
   onRemove:()=>{alert('被删除了')}
  };
};

mapStateToProps

• mapStateToProps 在组件renser()前被执行，因此每次render后的组件状态都与Store同步。
• mapStateToProps 为组件提供了读取Store的state的方法，并将其定义为组件的prop
• 理想状态下，只有Store拥有state,其它所有组件始终都只有props