在使用 React 和 Redux 开发 Web 应用的过程中，我们经常需要编写大量的 action 和 reducer。为了避免命名冲突，保证代码的风格一致，我们需要严格遵循一定的命名约定。而 redux-convention 这个 npm 包就提供了一个统一的命名约定，可以帮助我们更好地管理 Redux 的代码。
安装 redux-convention
首先，我们需要在项目中安装 redux-convention：
npm install redux-convention --save
定义 action
redux-convention 规定了每个 action 都应该包含 type 和 payload 两个属性。其中 type 是一个字符串，用于描述这个 action 的类型，而 payload 则是一个 JavaScript 对象，用于传递额外的数据。
我们可以使用 redux-convention 的 createAction 函数来定义一个符合约定的 action。例如：
import { createAction } from 'redux-convention';
export const setUser = createAction('SET_USER', {
id: 0,
name: '',
age: 0
});这里，我们定义了一个名为 setUser 的 action，它的 type 是 SET_USER，payload 包含 id、name 和 age 三个字段。我们可以通过调用 setUser 函数，并传递对应的参数，来生成一个符合约定的 action：
-- -------------------- ---- ------- ------ - ------- - ---- ------------ ----- ---- - - --- -- ----- ------ ---- -- -- ----- ------ - --------------
这里，我们创建了一个名为 user 的对象，包含了 id、name 和 age 三个字段，然后将其作为参数传递给 setUser 函数，生成了一个符合约定的 action。
定义 reducer
redux-convention 规定了每个 reducer 都应该是一个纯函数，接收一个 state 和一个 action，然后根据 action 的 type，返回一个新的 state。
我们可以使用 redux-convention 的 createReducer 函数来定义一个符合约定的 reducer。例如：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - ------- - ---- ------------
----- ------------ - -
--- --
----- ---
---- -
--
------ ----- ----------- - --------------------------- -
--------------- ------- ------- -- --
---------
--- ------------------
----- --------------------
---- ------------------
--
---这里，我们定义了一个名为 userReducer 的 reducer，它初始的 state 包含了 id、name 和 age 三个字段。然后，我们在 createReducer 函数中传入了一个对象作为参数，这个对象中的键名为 action 的 type，键值为一个函数，这个函数接收当前的 state 和 action，在这个函数中我们可以处理这个 action，并返回一个新的 state。
把 reducer 挂载到 store 上
最后，我们需要把刚刚定义的 reducer 挂载到 Redux 的 store 上，以便应用程序可以使用这个 reducer 处理 state 的变化。
import { combineReducers, createStore } from 'redux';
import { userReducer } from './reducers';
const rootReducer = combineReducers({
user: userReducer
});
const store = createStore(rootReducer);这里，我们使用了 Redux 的 combineReducers 函数来将多个 reducer 合并为一个 rootReducer，然后使用 createStore 函数创建了一个 Redux 的 store，将 rootReducer 挂载到 store 上。
示例代码
以下是一个简单的示例代码，演示了如何使用 redux-convention 来定义 action 和 reducer，并将 reducer 挂载到 Redux 的 store 上。
actions.js
import { createAction } from 'redux-convention';
export const setUser = createAction('SET_USER', {
id: 0,
name: '',
age: 0
});reducers.js
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - ------- - ---- ------------
----- ------------ - -
--- --
----- ---
---- -
--
------ ----- ----------- - --------------------------- -
--------------- ------- ------- -- --
---------
--- ------------------
----- --------------------
---- ------------------
--
---index.js
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ - ----------- - ---- ------------- ------ - ------- - ---- ------------ ----- ----------- - ----------------- ----- ----------- --- ----- ----- - ------------------------- ----- ---- - - --- -- ----- ------ ---- -- -- ------------------------------ -----------------------------------
在控制台中，我们可以看到输出了如下内容：
{ id: 1, name: "Tom", age: 18 }总结
使用 redux-convention 可以帮助我们更好地管理 Redux 的代码，避免命名冲突，保证代码的风格一致。通过本文的介绍，相信读者已经了解了如何使用 redux-convention 来定义符合约定的 action 和 reducer，并将 reducer 挂载到 Redux 的 store 上，以便应用程序可以使用这个 reducer 处理 state 的变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a69