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 组件连接起来。

// www.javascriptcn.com code example
import { connect } from 'react-redux';
import { addTodo } from './actions';

const TodoList = ({ todos, addTodo }) => (
  <div>
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
    <button onClick={() => addTodo('New Todo')}>Add Todo</button>
  </div>
);

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

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

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

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