react-redux中connect函数的mapStateToProps与mapDispatchToProps参数有何区别？

Great question! Let's break down the key differences between mapStateToProps and mapDispatchToProps in React-Redux's connect function—they’re both essential for linking your React components to the Redux store, but they serve entirely distinct roles.

Core Purpose #

At their core, these two functions handle opposite directions of data flow in Redux:

• mapStateToProps: This is your component's "data getter" from the Redux store. It extracts specific pieces of state (or derived data) from the global Redux store and passes them as props to your component. In short, it enables your component to read data from the store.
• mapDispatchToProps: This is your component's "action trigger" for the Redux store. It wraps Redux's dispatch method into component-friendly props, so your component can write data to the store (by dispatching actions) without directly calling dispatch itself.

Signature & Parameters #

The function signatures and required inputs differ significantly:

For mapStateToProps #

Its signature is:

(state, ownProps?) => object

• state: The entire global state object from your Redux store (required). You'll use this to pick out the data your component needs.
• ownProps (optional): The props that are already being passed to your component from its parent. If your component's data depends on these props, this argument lets you adjust the state selection dynamically.

For mapDispatchToProps #

It has two valid forms:

1. Function form:

   (dispatch, ownProps?) => object
   

   • dispatch: The Redux store's dispatch method (required). You'll wrap your action creators with this to trigger state updates.
   • ownProps (optional): Again, the component's parent-provided props, useful if you need to customize action dispatch based on those props.
2. Object form:
   You can directly pass an object of action creators (instead of a function). React-Redux automatically wraps each action creator in dispatch for you—this is the more common, concise approach.

Return Value & Usage Examples #

Let's look at what each function returns, with practical code snippets.

mapStateToProps Example #

This function returns an object where each key becomes a prop for your component, and the value is derived from the Redux state:

import { connect } from 'react-redux';

const TodoList = ({ incompleteTodos }) => (
  <ul>
    {incompleteTodos.map(todo => <li key={todo.id}>{todo.text}</li>)}
  </ul>
);

// Extract derived data: only todos that aren't completed
const mapStateToProps = (state) => {
  return {
    incompleteTodos: state.todos.filter(todo => !todo.isCompleted)
  };
};

// Connect the component to the store with mapStateToProps
export default connect(mapStateToProps)(TodoList);

mapDispatchToProps Examples #

Function Form

Here we wrap an action creator in dispatch and expose it as a component prop:

import { connect } from 'react-redux';
import { addTodo } from '../actions/todoActions';

const TodoForm = ({ addTodo }) => {
  const [inputText, setInputText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo(inputText); // Call the wrapped prop to dispatch the action
    setInputText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="Add a new todo..."
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text)) // Wrap action creator with dispatch
  };
};

// Pass null for mapStateToProps (we don't need store data here)
export default connect(null, mapDispatchToProps)(TodoForm);

Object Form (Simpler)

Instead of writing a function, pass the action creator directly as an object—React-Redux handles the dispatch wrapping automatically:

// Replace the mapDispatchToProps function with this object
export default connect(null, { addTodo })(TodoForm);

Quick Summary of Key Differences #

内容的提问来源于stack exchange，提问作者Lex V