前端开发中，状态管理对于应用程序的设计和复杂程度非常重要。在 React 应用程序中，Redux 是一个流行的状态管理工具。然而，Redux 自身不提供任何数据结构或核心结构。因此，我们需要使用 Redux 相关的 npm 包。其中一个优秀的 npm 包是 redux-shape。
redux-shape 是一个基于对象形状的 Reducer 帮助程序。其目标是简化 Redux 的初始设置并为状态多维数组中的复杂应用程序提供帮助。
这篇文章将向您展示如何使用 redux-shape、它的优点以及如何将它应用于您的应用程序。
安装
首先，我们需要使用 npm 安装 redux-shape：
npm install redux-shape --save
然后，在您的应用程序中添加它：
import { createReducer } from 'redux-shape'接下来，您可以开始使用 redux-shape。
数据对象的形状
redux-shape 帮助程序的一个重要特性是对象形状。在需要处理多个重要状态的应用程序中，快速访问联机状态可能很有用。redux-shape 中，您可以使用对象形状自定义状态。
import { createReducer } from "redux-shape";
const initialState = { loggedIn: false, user: {} };
export default createReducer(initialState, {
USER_AUTHENTICATED: (state, action) => ({ ...state, loggedIn: true, user: action.user }),
USER_UNAUTHENTICATED: (state, action) => ({ ...state, loggedIn: false, user: {} })
});在这个示例中，我们使用用户验证行为创建一个 Reducer。每次登录成功或退出登录时都会分别调用 USER_AUTHENTICATED 和 USER_UNAUTHENTICATED。在状态更改中，我们使用前一状态和行为的负载进行简单合并。
使用组合
由于 redux-shape 帮助程序的对象形状和用于对象排序的“shape”概念，您可以轻松地进行组合。例如，您可以将多个 Reducer 组合在一起：
-- -------------------- ---- ------- ------ - ------------- - ---- ------------- ------ - --------------- - ---- ------- ------ - --------------- ---------------- ---------------- - ---- ----------------- ----- ------------ - --------------- ------- ----- -- - ----------------- ------- -- -- -- --------- ------- ---- --- ------------------ ------- -- -- -- --------- ------- ----- -- -- ----- ----------- - --------------- ----- --- --------- ----- -- - ------------------- ------- - ---- -- -- -- --------- ----- --------- ---- -- -- ------ ------- ----------------- ------ ------------- ----- ------------ --
在这个示例中，我们创建了两个 Reducer：modalReducer 和 userReducer。在 combineReducers() 中，我们将它们组合在一个 Reducer 中。
如何使用 redux-shape
setup
首先，在您的应用的文件中导入依赖：
import { createReducer, createSelector } from 'redux-shape'声明初始状态
现在，您声明应用程序的初始状态：
const initialState = {
postComments: [],
hasSyncErrors: false,
selectedPost: null
};定义 action 类型
接下来，您要定义可以触发状态更改的所有操作。一个为 action 定义一个常量对于文档和清晰度非常有用：
const SET_POST = 'SET_POST'; const ADD_COMMENT = 'ADD_COMMENT'; const SET_SELECTED_POST = 'SET_SELECTED_POST'; const SET_ASYNC_FAILED = 'SET_ASYNC_FAILED';
创建 action
在应用程序中的组件上创建 action 函数。例如，这个函数会触发 SET_POST 操作：
export const setPost = (post) => ({ type: SET_POST, payload: { post } });请注意，我们稍后将在创建 Reducer 时使用 SET_POST 类型。
创建 Reducer
现在是创建 Reducer 的时候。在这个过程中，我们将使用 createReducer：
-- -------------------- ---- -------
----- ------- - --------------------------- -
----------- ------- ------- -- --
---------
----- --------------------
-------------- ------
------------- ----
---
-------------- ------- ------- -- --
---------
------------- ------------------- -----------------------
---
-------------------- ------- ------- -- --
---------
------------- -----------------
---
------------------- ------- ------- -- --
---------
-------------- ----
--
---Reducer 是一个功能。每个 Reducer 都有一个类型，以用于处理与该类型关联的状态更改。在这个示例中，“SET_POST”表示更改 post 属性。
还要注意的重要事项是，只要在 Reducer 中返回一个新的状态实例，我们就可以使用“…”运算符合并先前的状态并添加新状态，而不必担心任何意外的状态突变。
创建 selector
在 redux-shape 中，selector 是一个函数，它从您的状态对象中检索有用的值。redux-shape 中的 createSelector 函数是一个高阶函数，它接受一个或多个 selector 作为输入并返回一个新的 selector。例如：
const getComments = (state) => state.postComments; const getSelectedPost = (state) => state.selectedPost; export const getCommentsForSelectedPost = createSelector( [getComments, getSelectedPost], (comments, postId) => comments.filter(comment => comment.postId === postId) );
在这个示例中，我们创建了一个更具体的 selector，该 selector 返回一个用户给定“post ID”选择的所选后到它的所有评论的数组。
dispatching actions
在您的应用程序中，您可以使用 dispatch 函数将 action 提交到您的 store 中。例如：
import { setPost } from "./actions";
import { useDispatch } from "react-redux";
const dispatch = useDispatch();
const setPostHandler = useCallback((post) => {
dispatch(setPost(post));
}, [dispatch, setPost]);在这个示例中，我们定义了一个将 post 发送到 store 的 setPostHandler 函数。
总结
在本文中，我们学习了如何使用 redux-shape 包帮助我们在 React 应用程序中管理状态。我们还学习了如何声明状态的初始形状、定义 action 和使用 Reducer 和 selectors。通过使用 redux-shape，我们可以更方便地创建应用程序状态管理逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a354105d