手把手玩转 React全家桶之 Redux

前端

2024-01-08 23:24:03

Redux 简介

Redux 是一个 JavaScript 库，用于管理应用程序的状态。它以一种可预测的方式存储数据，并允许您使用纯函数来更新数据。Redux 使得应用程序的状态更容易理解和调试，并有助于在不同的组件之间共享数据。

Redux 的核心概念

Redux 由以下几个核心概念组成：

状态： 应用程序的状态是应用程序中所有数据的一个集合。
动作： 动作是表示应用程序状态更改的简单对象。
reducer： reducer 是一个纯函数，它接收一个动作和当前状态，并返回一个新的状态。
存储： 存储是保存应用程序状态的地方。

Redux 的工作原理

Redux 的工作原理如下：

应用程序分发一个动作。
reducer 接收动作和当前状态，并返回一个新的状态。
存储更新为新的状态。
组件重新渲染。

使用 Redux 管理 React 应用程序的状态

要使用 Redux 管理 React 应用程序的状态，您需要执行以下步骤：

安装 Redux 库。
创建一个 Redux 存储。
将 Redux 存储连接到 React 应用程序。
在 React 组件中使用 Redux 状态。

安装 Redux 库

要安装 Redux 库，您可以使用 npm 或 yarn 包管理器。使用 npm 安装 Redux 库的命令如下：

npm install redux

使用 yarn 安装 Redux 库的命令如下：

yarn add redux

创建一个 Redux 存储

要创建一个 Redux 存储，您可以使用 createStore() 函数。该函数接受一个 reducer 函数作为参数，并返回一个 Redux 存储。

import { createStore } from 'redux';

const reducer = (state, action) => {
  // 返回一个新的状态
};

const store = createStore(reducer);

将 Redux 存储连接到 React 应用程序

要将 Redux 存储连接到 React 应用程序，您可以使用 Provider 组件。该组件将 Redux 存储提供给 React 组件树中的所有子组件。

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

const App = () => {
  return (
    <Provider store={store}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Provider>
  );
};

在 React 组件中使用 Redux 状态

要在 React 组件中使用 Redux 状态，您可以使用 useSelector 钩子。该钩子接受一个选择器函数作为参数，并返回 Redux 状态中选择的值。

import { useSelector } from 'react-redux';

const MyComponent = () => {
  const count = useSelector((state) => state.count);

  return (
    <div>
      {count}
    </div>
  );
};