R

Redux：初学者指南

2025-06-05

Redux：初学者指南

关注我！：关注@EricTheCoder_

您的应用程序变得越来越复杂？

随着时间的推移，你的 React 应用程序会变得越来越复杂，包含越来越多的组件，以及越来越多的数据进出。同时管理多个组件及其子组件的状态会变得非常复杂。

有没有更好的方法来管理你所有应用组件和子组件的状态？有的，这个库就是 Redux。

Redux 是什么

Redux 是最流行的状态管理解决方案。如今，Redux 已成为各大公司采用的标准。

Redux 正在使用 redux 存储，这样整个应用程序就由一个状态对象处理。

以下是 Redux 的三个核心原则：

  • 整个应用程序的状态存储在单个存储内的对象树中，该存储作为应用程序的唯一真实来源。

  • 确保应用程序状态是只读的，并且需要通过发出描述性操作来进行更改。

  • 为了指定状态树如何通过动作进行转换，您可以编写纯 reducer 函数。

您的应用程序的整个状态集中在一个位置。

因此组件和子组件之间不再需要 props 钻孔。

无需向子组件发送道具，或向父组件发送回调函数。

使用 Redux，您的状态现在可以集中在一个位置，并且每个组件都可以直接访问该状态。

当使用 Redux 时，集中式存储现在是应用程序中状态发生变化的唯一地方。

您可以通过调度不同的操作来更改 store 中的状态。例如，一个操作是添加，另一个操作是更新，另一个操作是删除，等等。

安装 Redux

从已经创建的 React 项目文件夹中，您可以在终端中输入

$ npm install @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

创建 React 应用

如果您的应用程序尚未创建，您可以使用已安装和预配置的 redux store 来创建它。

$ npx create-react-app my-app --template redux
Enter fullscreen mode Exit fullscreen mode

注意：本教程不使用 create-react-app --template redux

在本教程中，我们使用 Redux Toolkit 从头开始​​设置一个 Redux 应用程序来设置 Redux 存储

Redux 开发者工具

您还可以在浏览器中安装 DevToll，以便于调试。Chrome 浏览器有一个扩展程序，名为 Redux DevTools。

Redux 如何工作？

Redux 改变了你编写应用程序的方式。Redux 还引入了许多新的 Redux 专用术语，例如 store、provider、splice、reducer、selector、action 等。

在创建所有这些元素并使您的商店正常运行之前，我们需要退一步，尝试将这个概念理解为一个洞。

我们试图实现的目标是找到一种更有效的方法来管理我们所有组件和子组件的状态，而无需使用 props 钻孔。

为此，我们使用 Redux。Redux 将所有状态集中在一个地方。这个集中的地方就是 store。

因此从现在开始，当您听到术语“商店”时，它指的是包含所有组件状态的应用程序中心位置。

创建 Redux 商店
第一步是创建您的应用 Redux 商店。

创建一个 js 文件：src/app/store.js，输入 Redux 初始化代码。

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})
Enter fullscreen mode Exit fullscreen mode

这将创建一个 Redux store，并暂时将 reducer 设置为空。稍后我会解释 reducer。

使 store 可用于 React

一旦创建了存储，我们就可以通过在 src/index.js 中的应用程序周围放置一个 React-Redux 提供程序来使其可用于我们的 React 组件。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
Enter fullscreen mode Exit fullscreen mode

导入我们刚刚创建的 Redux store，在你的 App 周围添加一个 Provider，并将 store 作为 prop 传递。现在，该 store 可供 Provider 中的所有组件使用。

选择器

由于组件状态位于中心位置，我们需要一种方法来调用该存储并检索状态。Redux 有一个选择器钩子可以帮助我们做到这一点。

例如，在您的商店中，您可以有一个名为 selectItems 的选择器（我们稍后会创建）。例如，该选择器可以返回您电商应用购物篮中的所有商品。

在您的组件中，您可以使用选择器钩子来调用该存储选择器并检索您的项目。

import { useSelector } from 'react-redux'
const items = useSelector(selectItems)
Enter fullscreen mode Exit fullscreen mode

就是这样。如你所见，从 store 中检索状态非常简单。无论你在组件 3 中的哪个位置，你都可以轻松地在 store 中检索状态。

Reducers

那么如何更改商品的状态呢？例如添加或删除商品？如何告诉 store 你想要添加或删除商品呢？你需要使用名为 Reducer 的 store 函数。

Reducer 函数永远不会改变当前状态。它总是返回一个新的更新状态对象。

例如，你可以有一个名为 addItemToBasket 的 Reducer 函数。该函数将返回包含新项目的新状态。

在您的组件中，您可以使用调度钩子调用 reducer 函数。

import { useDispatch } from 'react-redux'
import { addItemToBasket } from './basketSlice'
const dispatch = useDispatch()

return ( 
  <button onClick={() => dispatch(addItemToBasket(item))}>Add</button>
)
Enter fullscreen mode Exit fullscreen mode

我们在哪里以及如何声明选择器和减速器？

可以使用 createSlice 函数创建选择器和化简器。

“切片”这个名称源于我们将应用程序状态拆分为多个“切片”的想法。

例如，对于电子商务应用程序，一个切片可以是购物篮，另一个切片可以是用户，还有一个切片可以是产品，等等。

这是一个好主意，因为我们需要一种方法来对 selector 和 reducer 进行分组，我们不能把所有这些函数都放在一个大文件中。所以最好按切片进行分组。

例如，如果您想创建一个购物篮切片，您将创建一个文件：scr/app/features/basketSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  items: [
    {id: 1, name: 'iPhone10'},
    {id: 2, name: 'iPadPro'},
    {id: 3, name: 'iWatch'},
]
};
let nextId = 4
export const basketSlice = createSlice({
  name: 'basket',
  initialState,

  reducers: {
    addItemToBasket: (state, action) => {
      console.log('in')
      state.items = [...state.items, {id: nextId, name: action.payload.name}]
      nextId += 1
    },
    removeItemFromBasket: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload.id)
    },
  },
});

export const { addItemToBasket, removeItemFromBasket } = basketSlice.actions;

export const selectItems = (state) => state.basket.items;

export default basketSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

这个篮子切片包含 2 个减速器和一个选择器。

就是这样？

我们现在可以在你的组件中使用这些 Reducer 和 Selector 了吗？目前还不行。你需要将 Reducer 注册到 Store 中。为此，请重新访问你之前创建的 store.js 文件并添加basketSlice Reducer。

import { configureStore } from '@reduxjs/toolkit';
import basketReducer from '../features/basket/basketSlice';

export const store = configureStore({
  reducer: {
    basket: basketReducer,
  },
});
Enter fullscreen mode Exit fullscreen mode

现在，购物篮切片可供您的所有应用程序组件使用。

概括

好的，让我们回顾一下：

  • 我们有一个包含所有应用程序状态的商店。

  • 我们在 scr/app/store.js 中创建我们的应用商店

  • 为了使该商店可供您的组件使用，我们在 App 顶级组件之间添加了 Provider 标签

  • 要从存储中检索或改变数据，我们需要使用选择器和减速器。

  • 选择器和减速器按应用程序功能调用切片进行分组。

  • 要调用选择器，我们使用钩子名称 useSelector()。例如：items = useSelector(basketItems)

  • 要调用 Reducer 操作，我们使用名为 useDispatch() 的钩子。例如：dispatch(addItemToBasket(item))

结论

哎呀，一次读下来有很多空白。如果你没有完全理解，这很正常。多读几遍这篇文章，然后在网上继续学习其他教程。

今天就到这里。我还有很多关于 React 的文章，所以如果你想确保不会错过任何内容，请点击关注我！

我是 Twitter 新手，所以如果你想让我开心，
请关注我！：关注@justericchapman

文章来源：https://dev.to/ericchapman/redux-beginner-s-guide-208
Devto 翻译
PREV
3D打印简介
NEXT
React（正在进行中）备忘单