Redux 是一个非常受欢迎的状态管理库，它为复杂的应用程序提供了一种统一的状态管理方式。在使用 Redux 进行开发时，我们不仅要关注状态的设计和处理逻辑，还需要遵循一些规范和代码风格。本文将简要介绍 Redux 的规范和代码风格，帮助你写出更加易读且维护性强的代码。
规范
Action
Action 表示发生了什么事情，是一个对象，必须包含一个 type 属性，它描述了这个 action 的具体类型。
在设计 Action 时，应该遵循以下规范：
- 从命名来看，使用动词和名词的组合而不是使用动词或名词。
- 使用常量代替字符串来描述 action 中的 type，这样可以避免因为拼写错误导致的问题。
- 如果 action 中需要包含其他数据，可以添加 payload 属性。
例如，我们可以定义一个 ADD_TODO 的 type 常量作为 action 的类型，如下所示：
export const ADD_TODO = 'ADD_TODO';
export function addTodo(payload) {
return {
type: ADD_TODO,
payload
};
}Reducer
在 Redux 中，Reducer 是一个纯函数，它接收先前的状态和一个 action，并返回一个新的状态。Reduer 的作用就是根据 action 中的 type 来更新状态。在编写 Reducer 时，应该遵循以下规范：
- Reducer 是一个纯函数，不能修改先前的状态，也不能执行任何异步操作，它只能根据先前的状态和 action 计算出新的状态。
- Reducer 函数必须是幂等的，即只要输入相同，输出必定相同。
- 在 Reducer 中不要使用 switch 语句，使用对象字面量代替 switch 语句，能使代码更清晰易读。
例如，我们可以定义一个 todosReducer，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- ------------
----- ------------ - -
------ --
--
-------- ------------------ - ------------- ------- -
----- -------------- - -
----------- -- -- --
---------
------ -
---------------
--------------
-
--
--
----- ------- - ----------------------------
------ ------- - --------- - ------
-Store
Redux 的 Store 是应用程序的状态管理中心，它包含了应用程序的整个状态树。在创建 Store 时，应该遵循以下规范：
- Store 只能由 createStore 函数创建，createStore 函数接收一个 Reducer 和一个可选的初始状态。
- Store 的状态只能通过 dispatch 方法更新，dispatch 方法接收一个 action 作为参数。
例如，我们可以创建一个 Store，如下所示：
import { createStore } from 'redux'
import todosReducer from './reducers/todosReducer'
const store = createStore(todosReducer);代码风格
Actions
在编写 Action 时，应该遵循以下代码风格：
- 使用小驼峰命名法（camelCase）。
- 保持 actions 与 store 的结构相同。
- 让 actions 保持简洁，最好只包含一个属性。
例如，我们可以定义一个 ADD_TODO 的 action，并将其与 todos 对应起来，如下所示：
export const ADD_TODO = 'ADD_TODO';
export function addTodo(todo) {
return {
type: ADD_TODO,
todo
};
}Reducers
在编写 Reducer 时，应该遵循以下代码风格：
- 保持 reducer 简单，不要再一个 reducer 中处理太多的数据。
- 在 reducer 中要为 action.type 添加 switch 语句。
- 不要直接修改 state 对象，而是要返回一个新的 state 对象。
例如，我们可以定义一个 todosReducer，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- -------------
----- ------------ - -
------ --
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- ---------
------ -
------ -
---------------
-----------
-
--
--------
------ ------
-
-
------ ------- -------------Constants
在编写 Redux 应用程序时，应该遵循以下代码风格：
- 定义 action.type 常量，加强代码的可读性并避免拼错 type 的问题。
- 将常量放在单独的文件中。
例如，我们可以定义 ADD_TODO 的常量，如下所示：
export const ADD_TODO = 'ADD_TODO';
结论
Redux 是一个非常强大的状态管理库，但是在使用它的过程中，遵循一些规范和代码风格是必要的，它可以使代码更清晰易读、更易于维护。本文介绍了 Redux 的规范和代码风格，希望可以对你的开发工作有所帮助。
示例代码：https://github.com/Learning-By-Doing/redux-style-guide
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673883b0317fbffedf11072b