Redux 是一款非常流行的 JavaScript 状态管理库，它为前端应用的复杂状态管理提供了一种简洁、可预测的解决方案。尽管 Redux 的使用已经相当普遍，但很多开发者仍然存在很多不熟练的使用方式和误解。这篇文章将会介绍 Redux 的最佳实践，帮助你通过正确的使用 Redux 创建出更加可维护和可扩展的应用。
什么是 Redux？
Redux 是一种用于管理应用程序状态的 JavaScript 库。它是基于 Flux 架构的，但是提供了一种更简单、更实用的解决方案。Redux 的核心原则是单一数据源和状态只读，即整个应用的状态被保存在单一的 store 中，并且只有通过操作 action 来修改状态，而不能直接修改。这种规则保证了应用的状态可预测性和可控性。
Redux 应用的基本结构
Redux 应用的基本结构包括三部分：store、action 和 reducer。
Store
store 是 Redux 应用的状态容器，它保存了整个应用的状态，并且通过提供一些方法（如 getState、dispatch 和 subscribe）来访问和修改状态。
Action
action 是一种描述行为的对象，主要用于传递操作到 reducer 中。action 中必须包含一个 type 字段，它用于表示该操作的类型。
Reducer
reducer 是一种函数，它接收当前状态和 action，然后返回新的状态。reducer 的主要作用是处理各种类型的操作，并根据操作类型更新状态。
Redux 基本使用示例
以下是一个简单的 Redux 应用示例：
-- -------------------- ---- ------- -- ---------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ -------- ------------- - ------ - ----- --------- ---- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- -
-- -------------------- ---- -------
-- -----------
------ - --------- ----------- - ---- ------------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ - --------- ------ ---------------- - ----- ------------ ---------- ----- -- --
---- ------------
------ -
---------
------ ---------------------- ------ -- -
-- ------ --- ---------- -
------ - -------- ---------- --------------- --
-
------ -----
--
--
--------
------ ------
-
--- -------------------- ---- ------- -- -------- ------ - ----------- - ---- -------- ------ ------- ---- ------------- ----- ----- - --------------------- ------------------ -- ------------------------------- ----------------------------- -------- ------------------------------ -------- ------------------------------
在上面的示例中，我们定义了两个 action（ADD_TODO 和 TOGGLE_TODO），然后在 reducer 中处理这些操作并更新状态。最后在 index.js 中，使用 createStore 创建一个 store，并通过 dispatch 方法分别触发两个 action，然后用 subscribe 方法监听状态的变化。
Redux 最佳实践
将 actions 和 reducers 模块化
为了方便管理和维护，我们通常会将 actions 和 reducers 分别放到不同的模块中。所有的 action 应该定义为一个模块，所有的 reducer 也应该定义为一个模块。
-- -------------------- ---- ------- -- ---------------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ -------- ------------- - ------ - ----- --------- ---- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- -
-- -------------------- ---- -------
-- -----------------
------ - --------- ----------- - ---- ------------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ - --------- ------ ---------------- - ----- ------------ ---------- ----- -- --
---- ------------
------ -
---------
------ ---------------------- ------ -- -
-- ------ --- ---------- -
------ - -------- ---------- --------------- --
-
------ -----
--
--
--------
------ ------
-
-使用 action creators 生成 action
我们通常会将生成 action 的代码封装到一个函数中，这个函数被称为 action creator。使用 action creators 可以让我们的代码更加简洁和可读。
// todos/actions.js
export function addTodo(text) {
return { type: ADD_TODO, text };
}
export function toggleTodo(id) {
return { type: TOGGLE_TODO, id };
}// index.js
import { addTodo, toggleTodo } from './todos/actions';
store.dispatch(addTodo('First todo'));
store.dispatch(addTodo('Second todo'));
store.dispatch(toggleTodo(1));避免直接修改 state
在 Redux 应用中，任何对 state 的修改都必须通过 dispatch 一个 action 来实现。这保证了状态的可预测性和可控性。
-- -------------------- ---- -------
-- -----------------
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ - --------- ------ ---------------- - ----- ------------ ---------- ----- -- --
---- ------------
------ -
---------
------ ---------------------- ------ -- -
-- ------ --- ---------- -
------ - -------- ---------- --------------- --
-
------ -----
--
--
--------
------ ------
-
-使用 combineReducers 合并 reducers
当一个应用需要管理多个状态时，我们可以创建多个 reducer 来处理不同的状态，然后使用 combineReducers 方法将它们合并成一个 reducer。
-- -------------------- ---- ------- -- ----------- ------ - --------------- - ---- -------- ------ ----- ---- ------------------- ------ ------- ---- --------------------- ------ ------- ----------------- ------ ------- ---
使用 Redux DevTools
Redux DevTools 是一款非常实用的 Chrome 扩展程序，它可以帮助我们在浏览器中调试 Redux 应用。
import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);使用中间件处理异步操作
虽然 Redux 可以很好地处理同步操作，但它却不擅长处理异步操作。为了解决这个问题，我们通常会使用 Redux 中间件来处理异步操作。
下面是一个使用 redux-thunk 处理异步操作的例子：
-- -------------------- ---- -------
-- ----------------
------ - --------- ----------- - ---- --------------
------ -------- -------------------- -
------ -------- -- -
------ ------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ---- --
--
-------------- -- ----------------
---------- -- -
-------------------------------
---
--
-
------ -------- --------------------- -
------ -------- -- -
------ ------------------------- - ------- ----- --
-------------- -- ----------------
---------- -- -
----------------------------------
---
--
-
------ -------- -------------------- -
------ - ----- --------- ---- --
-
------ -------- ----------------------- -
------ - ----- ------------ ---- --
-上面的代码中，我们定义了两个 action creator（addTodoRequest 和 toggleTodoRequest），它们返回一个函数，这个函数会在异步操作完成后 dispatch 相关的 action。
// index.js
import { addTodoRequest, toggleTodoRequest } from './todos/actions';
store.dispatch(addTodoRequest('First todo'));
store.dispatch(addTodoRequest('Second todo'));
store.dispatch(toggleTodoRequest(1));结论
本文介绍了 Redux 的最佳实践，并提供了一些实用的示例代码。倘若您正在使用 Redux ，希望这篇文章能够帮助您更好地使用 Redux ，从而创建出更加可维护和可扩展的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a8bbad91dce0dc882c73f