或者

React Redux 是一个用于构建可预测应用状态的库。它结合了 React 和 Redux，允许开发者使用 React 组件和 Redux 状态管理来创建高效、可维护的应用程序。

安装 Redux 和 React-Redux

首先，你需要安装 Redux 和 React-Redux。你可以使用 npm 或 yarn 来安装：

npm install redux react-redux

yarn add redux react-redux

创建 Store

Redux 的核心是 Store。Store 是一个包含所有应用状态的容器，它允许你通过 dispatch 来更新状态。

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

使用 React-Redux

React-Redux 提供了两个主要的 API：Provider 和 connect。

• Provider：用于将 Redux Store 提供给 React 组件树。
• connect：用于将 Store 的状态和操作映射到 React 组件的 props 和 methods。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';

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

// 创建一个 React 组件
class Counter extends React.Component {
  render() {
    return (
      <div>
        <p>Count: {this.props.count}</p>
        <button onClick={this.props.increment}>Increment</button>
        <button onClick={this.props.decrement}>Decrement</button>
      </div>
    );
  }
}

// 使用 connect 将 Store 的状态和操作映射到组件的 props 和 methods
const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

// 使用 Provider 包裹你的根组件，并将 Store 传递给它
ReactDOM.render(
  <Provider store={store}>
    <ConnectedCounter />
  </Provider>,
  document.getElementById('root')
);

扩展阅读

更多关于 React Redux 的内容，可以参考我们的 React Redux 教程。

<center><img src="https://cloud-image.ullrai.com/q/react_redux/" alt="react_redux"/></center>