React-Redux 中间件

安装 React-Redux 插件

React-Redux 插件可以通过 npm 安装：

npm install react-redux

使用 React-Redux 中间件

React-Redux 中间件是 React-Redux 插件的重要组成部分，它可以帮助我们管理 React 应用的状态。

1. Provider 组件

Provider 组件是 React-Redux 插件的核心组件，它可以让 React 组件和 Redux store 建立连接。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';
import reducer from './reducer';

// 创建 Redux store
const store = createStore(reducer);    

// 使用 Provider 组件将 store 注入到 React 组件树中
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2. connect() 函数

connect() 函数是 React-Redux 插件的主要功能，它可以将 React 组件和 Redux store 连接起来，使得 React 组件可以获取 Redux store 中的状态。

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

// 定义 mapStateToProps 函数，将 Redux store 中的 state 映射到 props 上
const mapStateToProps = state => {
  return {
    todos: state.todos
  };
};

// 定义 mapDispatchToProps 函数，将 action creator 映射到 props 上
const mapDispatchToProps = dispatch => {
  return {
    addTodo: text => dispatch(addTodo(text))
  };
};

// 使用 connect() 函数将 mapStateToProps 和 mapDispatchToProps 连接到 App 组件上
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

3. useSelector() 函数

useSelector() 函数是 React-Redux 插件提供的另一个辅助函数，它可以帮助我们获取 Redux store 中的状态。

import React from 'react';
import { useSelector } from 'react-redux';

// 在组件中使用 useSelector 获取 Redux store 中的状态
const App = () => {
  const todos = useSelector(state => state.todos);
  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
};

4. useDispatch() 函数

useDispatch() 函数是 React-Redux 插件提供的另一个辅助函数，它可以帮助我们触发 Redux store 中的 action。

import React from 'react';
import { useDispatch } from 'react-redux';

// 在组件中使用 useDispatch 触发 Redux store 中的 action
const AddTodo = () => {
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch(addTodo('Learn Redux'));
  };
  return (
    <button onClick={handleClick}>Add Todo</button>
  );
};