mapStateToProps 与 mapDispatchToProps

Question

connect函数的mapStateToProps和mapDispatchToProps参数有什么区别反应还原？

Answer 1

用一个非常简单的术语来说，

mapStateToProps: 将 redux state 连接到 react 组件的 props。

mapDispatchToProps：它连接 redux 动作以响应 props。

一个非常简单的例子：（我希望，你明白我的意思）

// state
const mapStateToProps = state => {
  return { lists: state.lists };
};

// props
const mapDispatchToProps = ({ lists }) => (
  <ul>
    { 
      lists.map(el => (
        <li key={ el.id }>
          { el.heading }
        </li>
      )
    }
  </ul>
);

// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);

Answer 2

mapStateToProps 是一个用于向组件提供商店数据的函数，而 mapDispatchToProps 是用于向组件提供动作创建者作为道具的函数。

根据文档：

If mapStateToProps argument is specified, the new component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps will be called. The results of mapStateToProps must be a plain object, which will be merged into the component’s props.

With mapDispatchToProps every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

一个简单的例子是

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { addTodo: bindActionCreators(addTodo, dispatch) }
}

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

Answer 3

简单来说：

mapStateToProps 当你想从你的组件中获取全局状态的值时被调用

function mapStateToProps(state) {
  return {
    message: state.message

  };
}

全局状态的值只有在动作的帮助下才会改变。所以如果你想改变全局状态的值，你需要一个动作。 mapDispatchToProps 用于在您的组件中绑定操作。

mapStateToProps 与 mapDispatchToProps

mapStateToProps vs mapDispatchToProps

reactjs

redux

react-redux

mapstatetoprops

mapdispatchtoprops