Redux 是一个用于管理 JavaScript 应用程序状态的可预测的状态容器,它特别适用于 React 应用程序。Redux 通过将所有状态集中在一个单一的位置来工作,这使得状态管理更加可预测和可维护。

Redux 的核心概念

  • State: 应用程序的状态。
  • Actions: 发送到 store 的通知,描述了发生了什么。
  • Reducers: 纯函数,用于根据当前 state 和 action 计算下一个 state。

安装 Redux

在 React 应用程序中安装 Redux 非常简单。你可以使用 npm 或 yarn 来安装它:

npm install redux
# 或者
yarn add redux

创建 Redux Store

创建 Redux store 是使用 Redux 的第一步。store 是一个对象,它保存了整个应用的状态,并提供了一些方法来访问和修改这个状态。

import { createStore } from 'redux';

const store = createStore(reducer);

使用 Redux 在 React 中

在 React 中使用 Redux 非常简单。你可以使用 react-redux 库来连接 React 组件和 Redux store。

npm install react-redux
# 或者
yarn add react-redux

然后,你可以使用 Provider 组件来包裹你的应用程序,并将 store 传递给它:

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

扩展阅读

想要了解更多关于 Redux 的信息?请访问我们的 Redux 教程

Redux Architecture