完整的 Redux 工具包（第 1 部分）-js教程-PHP中文网

完整的 Redux 工具包（第 1 部分）

WBOY

发布： 2024-09-08 20:31:33

原创

192 人浏览过

Complete Redux toolkit (Part-1)

Redux 工具包的用途

我们已经知道 redux 是 JavaScript 应用程序的一个强大的状态管理库，特别是在使用 React 时。
但是使用 redux 很困难，因为它设置 redux 的代码很繁重。这使得维护和调试变得困难。这就是 Redux Toolkit 可以提供帮助的地方。
Redux 工具包解决的问题

开店太复杂了。
添加许多包以与 redux 一起使用，例如中间件、工具。
Redux 需要太多代码来设置

Redux 工具包是官方推荐的编写 redux 逻辑的方法。它提供了一组工具来简化开发，减少样板代码，有助于提高应用程序的可扩展性和可维护性。

Redux 工具包的主要优点：

更少的样板代码：不再需要动作创建者和常量。
简化的商店设置：提供单个 API 来使用合理的默认值配置商店。
内置对不变性和 DevTools 的支持：自动启用 Redux DevTools 并与 Immer 集成以实现不变性。
更好的 TypeScript 支持：提供更好的打字效果并与 TypeScript 很好地集成。

我们可以将 redux 工具包与任何 javascript 库一起使用，因此我们使用 React 设置 redux 工具包。

在 React 应用程序中设置 Redux 工具包

第 1 步：创建一个新的 React 项目

首先，让我们创建一个新的 React 应用程序。您可以使用 create-react-app 或 Vite 来实现此目的。为了简单起见，我们将在这里使用 create-react-app。

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

登录后复制

第 2 步：安装 Redux 工具包和 React-Redux

接下来，安装必要的软件包：@reduxjs/toolkit 和react-redux。

npm install @reduxjs/toolkit react-redux

登录后复制

了解切片和减速器

切片是针对应用程序特定功能的 Redux 减速器逻辑和操作的集合。 Redux Toolkit 提供了 createSlice 函数来帮助使用最少的样板创建状态切片。

第 1 步：创建切片
让我们创建一个简单的计数器切片。在 features/counter 目录中创建一个名为 counterSlice.js 的新文件：

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

登录后复制

在这里，我们定义了一个名为 counter 的切片，它具有初始状态和三个减速器（increment、decrement 和incrementByAmount）。 createSlice 函数会自动为每个reducer 函数生成动作创建者。

配置 Redux 存储

现在我们有了切片，让我们配置 Redux 存储。 Redux Toolkit 提供了一个 configureStore 函数，可以使用良好的默认值设置存储。

第 1 步：创建商店
在应用程序目录中创建 store.js 文件：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

登录后复制

第 2 步：为您的应用程序提供商店
将您的 React 应用程序包装在react-redux 的组件中并将其传递给商店。更新index.js文件：

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

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

登录后复制

将组件连接到商店

要与 Redux 存储交互，请使用react-redux 提供的 useSelector 和 useDispatch 钩子。
第 1 步：使用 useSelector
访问状态使用 useSelector 钩子从 store 访问状态

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

登录后复制

第 2 步：在您的应用中使用计数器组件
在主应用程序组件中导入并使用 Counter 组件：

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

登录后复制