将 Redux Toolkit 与 React 结合使用：简单指南

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。它为开箱即用的商店设置提供了良好的默认设置，并包含最常用的内置 Redux 插件。在本博客中，我们将介绍将 Redux Toolkit 与 React 应用程序集成的基础知识。

什么是 Redux 工具包？

Redux Toolkit 是一组有助于简化编写 Redux 逻辑过程的工具。它包含用于简化常见用例的实用程序，例如存储设置、创建减速器和编写不可变的更新逻辑。

---

使用 React 设置 Redux 工具包

让我们完成在 React 应用程序中设置 Redux Toolkit 的步骤。

第 1 步：安装依赖项

首先，您需要安装必要的软件包。您可以使用 npm 或yarn 来完成此操作。

npm install @reduxjs/toolkit react-redux

第 2 步：创建 Redux Store

store 是赋予 Redux 生命的对象。通过 Redux Toolkit，您可以使用 configureStore 函数创建一个 store。

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

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

export default store;

第 3 步：创建切片

切片是应用程序单个功能的 Redux 减速器逻辑和操作的集合。 Redux Toolkit 的 createSlice 函数会自动生成动作创建者和动作类型。

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

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

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

export default counterSlice.reducer;

第 4 步：为您的 React 应用程序提供 Store

要使 Redux 存储可供您的 React 组件使用，您需要使用 React-redux 中的 Provider 组件。

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

ReactDOM.render(
  <provider store="{store}">
    <app></app>
  </provider>,
  document.getElementById('root')
);

第 5 步：将 React 组件连接到 Redux Store

要将 React 组件连接到 Redux 存储，您可以使用 React-redux 中的 useSelector 和 useDispatch 钩子。

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

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

  return (
    <div>
      <h1 id="count">{count}</h1>
      <button onclick="{()"> dispatch(increment())}>Increment</button>
      <button onclick="{()"> dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

第 6 步：在您的应用程序中使用连接的组件

最后，您可以在应用程序中使用连接的组件。

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <counter></counter>
    </div>
  );
}

export default App;

---

结论

通过遵循这些步骤，您可以在 React 应用程序中设置 Redux Toolkit，以可预测和可维护的方式管理状态。 Redux Toolkit 简化了使用 Redux 时的许多常见任务，使编写和维护 Redux 逻辑变得更加容易。

---

进一步探索

对于那些想要深入了解 Redux Toolkit 和 React 的人，这里有一些宝贵的资源：

• Redux Toolkit 文档：官方文档提供了全面的指南和 API 参考。
  • Redux 工具包文档
• React Redux 文档：了解有关如何将 Redux 与 React 结合使用的更多信息。
  • React Redux 文档
• Redux Essentials 教程：帮助您启动并运行 Redux Toolkit 的分步教程。
  • Redux 基础教程
• Redux 基础教程：涵盖 Redux 核心概念的详细教程。
  • Redux 基础教程

感谢您的阅读！
宝。

以上是将 Redux Toolkit 与 React 结合使用：简单指南的详细内容。更多信息请关注PHP中文网其他相关文章！