Redux 是一种流行的状态管理库，使得开发大型 JavaScript 应用变得简单易行。而 redux-features 则为 Redux 提供了更多的有趣、实用的特性。
安装和配置
在使用 redux-features 之前，需要先安装和配置 Redux。
npm install redux
然后，创建一个 Redux store 对象，并初始化 state 状态：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ----- ------------ - -- -- ----------- ----- ------- - ------ - ------------- ------- -- - -- ------- ---- ------ ----- - ----- ----- - --------------------
安装 redux-features：
npm install redux-features
然后，在根 Reducer 中导入 redux-features 的 createReducer 函数，并添加到根 reducer 的 combineReducers 方法中。事实上，createReducer 底层就是利用 combineReducers，增强了各种特性。我们一会会详细介绍。
import { combineReducers } from 'redux'
import { createReducer } from 'redux-features'
const rootReducer = combineReducers({
// 此处不再是一个纯 function，而是使用 createReducer
})
const store = createStore(rootReducer)createReducer
createReducer 是 redux-features 的核心函数，它包装了原来的 reducer 函数，并增加了一些特性。
-- -------------------- ---- -------
----- ------------ - -
----- -----
--------- ---
-
----- ------- - --------------------------- -
-- -- ----- ------ -------
------------- ------- - ------- -- -- -
-- --------- ----- -----
-------------- - -
------------------
- -------- -------- ----- --- ------ --
-
------ -----
--
-- ---- ------ --
----------- ------- - ------- -- -- -
---------- - -------
------ -----
--
-- ----- ------ ----
------------------------- ------------------- ------- ------- -- -
-- -- -----
------ ------------
--
--createReducer 函数接受两个参数，第一个参数是初始状态 initialState，第二个参数是一个对象，键为字符串类型的 type，值为一个函数，负责处理对应的 action。
这个函数接受两个参数：state，即当前状态；action，即当前 action。它应该返回新的 state，以immutable的方式更新 store。
可以通过字符串类型的 type 属性快捷地匹配 action，字符串类型的 type 支持以“/”分割多层次命名，可以增加可读性和扩展性。
可以使用 combineActions 方法来组合多个 action 处理逻辑。combineActions 接受任意多个字符串类型的 type 值，返回一个新的 action 类型，它是由所有输入 action 类型的字符串值拼接而成。这个新的 action 是在 reducer 中用来匹配多个 action 的。
createAction
createAction 函数用于返回一个新的 action creator，每个 action creator 接受一个 payload 字段，返回一个包含 type 和 payload 字段的 plain object，type 字段即 action 类型，payload 字段即 action 携带的数据。
// 创建 action creator
const addMessage = createAction('addMessage')
// 使用 action creator
store.dispatch(addMessage('Hello Redux'))createAction 函数会返回一个新的 action creator，这个 action creator 是一个函数，每次被调用时会返回一个 plain object 类型的 action。
createSlice
createSlice 函数用于生成一个“切片”（slice）对象，其中包含了拥有自动生成的 _success、_error、... 等多个特殊 action 后缀的 action creators，以及生成的 reducer 函数。
-- -------------------- ---- -------
------ - ----------- - ---- ----------------
----- ------------ - -
-------- ------
------ -----
----- -----
-
----- ---------- - -------------
----- --------
-------------
-------------- -
---------- -
-------- ----- -- -
------------- - ----
--
-------- ------- ------- -- -
------------- - -----
---------- - --------------
--
------ ------- ------- -- -
------------- - -----
----------- - --------------
--
--
--
--
-- --- ------ --------
----- - -------- --------------- --------------- ------------ - - ------------------
-- --- -------
----- ------------ - ------------------createSlice 函数接受一个对象作为参数，这个对象包含以下几个字段：
name：定义切片的名称，可以在 Redux DevTools 中追踪和调试。initialState：定义初始状态。reducers：用于定义一些切片专有的 reducer，作为原始 reducer 的补充，可以覆盖原始 reducer 的同名方法，扩展其功能性。extraReducers：定义使用 createSlice 自动生成的 action 创建函数。
注意，reducers 和 extraReducers 同名的处理逻辑会被合并，生成更完善的 reducer 处理逻辑。在 extraReducers 中，使用{ REQUEST、SUCCESS、ERROR }的形式定义 action 子类型，切片中能够通过 getUserRequest、getUserSuccess、getUserError 等特殊后缀的 action creators 来创建 action。
createAsyncThunk
createAsyncThunk 函数用于生成处理异步操作的 action creators 的函数，这个函数封装了异步操作的开始、成功和失败中所需要的所有逻辑。
import { createAsyncThunk } from 'redux-features'
const fetchUser = createAsyncThunk('users/fetchUser', async (userId, thunkAPI) => {
const response = await fetch(`/users/${userId}`)
return response.data
})
store.dispatch(fetchUser(123))createAsyncThunk 函数需要传入三个参数：typePrefix、payloadCreator 和 options。
typePrefix：定义 action 类型的前缀。payloadCreator：生成 action 中携带数据的函数，可以使用 async/await，返回 被 dispatch 异步处理的结果。options：用于控制 action 的一些选项，其中的 getter 可以获取当前 store 中的 state 或其他值。
使用 createAsyncThunk，内部生成了 name 带有 _REQUEST、_SUCCESS、_ERROR 的三种值为触发状态的 action 的发起函数。常常可以通过添加 pending、fulfilled、rejected 容易的更新 state 的状态值。
总结
redux-features 提供了一些强大的工具和约定，使得我们在开发 Redux 应用时更加轻松、高效。
通过 createReducer 函数，我们可以使用更加简洁的方式更新 store。
通过 createAction 函数，我们可以创建易于使用的 action creators。
通过 createSlice 函数，我们可以轻松定义“切片”，自动生成 action creators 和 reducer。
通过 createAsyncThunk 函数，我们可以更加轻松、高效地处理异步操作。
希望本文对大家的学习和开发有所帮助，更多内容可以详细了解 Redux 官方文档以及 redux-features 的相关文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ca4