React 是一种流行的 JavaScript 库，用于构建用户界面。Redux 是一个可预测的状态容器，用于管理应用程序中的状态。Redux Toolkit 是一个官方推荐的 Redux 工具包，它提供了一个简化的 API，以帮助开发人员更快地编写 Redux 代码。
在本文中，我们将讨论如何在 React 中使用 Redux Toolkit，并探讨其如何极大地提高开发效率。
安装 Redux Toolkit
Redux Toolkit 可以通过 npm 包管理器进行安装。打开终端并运行以下命令：
npm install @reduxjs/toolkit
创建 Redux Store
Redux Toolkit 提供了一个 configureStore() 函数，用于创建 Redux Store。该函数将自动处理许多常见的 Redux 配置，例如使用 Redux Thunk 中间件进行异步操作、使用 Redux DevTools 进行调试等。
以下是使用 Redux Toolkit 创建 Redux Store 的示例代码：
import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; const store = configureStore({ reducer: rootReducer, });
创建 Redux Reducer
Redux Reducer 是一个纯函数，它接收先前的状态和操作，然后返回新的状态。Redux Toolkit 提供了一个 createSlice() 函数，用于创建 Redux Reducer。该函数将自动处理许多常见的 Redux Reducer 配置，例如使用 Immer 库进行不可变性更新。
以下是使用 Redux Toolkit 创建 Redux Reducer 的示例代码：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------- ----- ------------ - ------------- ----- ---------- ------------- -- --------- - ---------- ------- -- ----- - -- ---------- ------- -- ----- - -- -- --- ------ ----- - ---------- --------- - - --------------------- ------ ------- ---------------------展开代码
使用 Redux Reducer
我们可以使用 Redux Reducer 来管理应用程序中的状态。在 React 中，我们可以使用 useSelector() 钩子来访问 Redux Store 中的状态，并使用 useDispatch() 钩子来调度 Redux Reducer 中的操作。
以下是使用 Redux Reducer 的示例代码：
-- -------------------- ---- ------- ------ - ------------ ----------- - ---- -------------- ------ - ---------- --------- - ---- ----------------- -------- --------- - ----- ----- - ------------------- -- --------------- ----- -------- - -------------- ------ - ----- ---------- ------------ ------- ----------- -- --------------------------------- ------- ----------- -- --------------------------------- ------ -- -展开代码
结论
在本文中，我们讨论了如何在 React 中使用 Redux Toolkit，并探讨了其如何极大地提高开发效率。我们学习了如何使用 configureStore() 函数创建 Redux Store，如何使用 createSlice() 函数创建 Redux Reducer，以及如何使用 useSelector() 和 useDispatch() 钩子访问和调度 Redux Store 中的状态和操作。
Redux Toolkit 提供了许多其他有用的功能，例如创建 Redux 中间件、使用 Redux Toolkit Query 进行数据获取等。我们鼓励读者深入了解 Redux Toolkit，以更好地管理应用程序中的状态，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6726c23f2e7021665e1b369a
