React 中 mapStateToProps 和 mapDispatchToProps 的作用是什么？

推荐答案

mapStateToProps 和 mapDispatchToProps 是 React-Redux 中用于连接 React 组件与 Redux 存储的两个重要函数。

• mapStateToProps: 该函数用于将 Redux 存储中的状态映射到 React 组件的 props 中。它接收整个 Redux 状态作为参数，并返回一个对象，该对象的键值对将作为 props 传递给 React 组件。

• mapDispatchToProps: 该函数用于将 Redux 的 action creators 映射到 React 组件的 props 中。它接收 dispatch 函数作为参数，并返回一个对象，该对象的键值对将作为 props 传递给 React 组件，通常这些 props 是函数，用于触发 Redux 的 action。

本题详细解读

mapStateToProps

mapStateToProps 是一个可选函数，用于从 Redux 存储中选择组件所需的状态。它的主要作用是将 Redux 存储中的状态映射到组件的 props 中，使得组件可以访问这些状态。

const mapStateToProps = (state) => {
  return {
    todos: state.todos
  };
};

在这个例子中，mapStateToProps 函数从 Redux 存储中提取 todos 状态，并将其作为 todos prop 传递给组件。

mapDispatchToProps

mapDispatchToProps 也是一个可选函数，用于将 action creators 绑定到组件的 props 中。它的主要作用是将 Redux 的 dispatch 函数与 action creators 绑定，使得组件可以通过调用这些 props 来触发 Redux 的 action。

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text))
  };
};

在这个例子中，mapDispatchToProps 函数将 addTodo action creator 绑定到组件的 addTodo prop 中。当组件调用 this.props.addTodo('Learn Redux') 时，Redux 会触发相应的 action。

使用 connect 函数

mapStateToProps 和 mapDispatchToProps 通常与 connect 函数一起使用，将 Redux 存储与 React 组件连接起来。

-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------- - ---- ------------

----- -------- - -- ------ ------- -- -- -
  -----
    ----
      ----------------- ------ -- -
        --- -----------------------
      ---
    -----
    ------- ----------- -- ------------ ----------- -------------
  ------
--

----- --------------- - ------- -- --
  ------ -----------
---

----- ------------------ - ---------- -- --
  -------- ------ -- -----------------------
---

------ ------- ------------------------ ------------------------------

在这个例子中，TodoList 组件通过 connect 函数与 Redux 存储连接，mapStateToProps 和 mapDispatchToProps 分别将 todos 状态和 addTodo action creator 映射到组件的 props 中。