在 React 单页面应用（SPA）中，为了更好地管理应用状态，我们通常使用 Redux 这个流行的状态管理库。Redux 的设计思想是单向数据流，通过 store 存储应用状态，通过 action 触发状态变化，通过 reducer 处理状态变化，最终通过订阅 store 监听状态变化并更新视图。
在实际项目中，我们需要遵循一些最佳实践来更好地使用 Redux，并避免一些常见的陷阱。
1. 将状态分解为独立的部分
在设计 Redux 状态时，我们需要将状态分解为独立的部分，每个部分都有自己对应的 reducer 处理器。这样做的好处是让状态变化更加可控，也方便我们对整个应用状态进行调试和测试。
例如，我们可以将一个电商应用的状态分为商品列表状态、购物车状态、用户状态等。这些状态之间是相互独立的，我们可以为每个状态设计相应的 reducer 处理器。
2. 使用异步 action 处理异步操作
在实际项目中，我们经常需要处理异步操作，例如从服务器获取数据等。在 Redux 中，我们可以使用异步 action 来处理这些异步操作。
异步 action 实际上是一个返回函数的 action，这个函数可以执行异步操作并在异步操作完成后再 dispatch 一个普通的 action。例如：
function fetchProducts() {
return async (dispatch) => {
dispatch({ type: 'FETCH_PRODUCTS_REQUEST' });
const response = await fetch('/api/products');
const products = await response.json();
dispatch({ type: 'FETCH_PRODUCTS_SUCCESS', payload: products });
};
}这个异步 action 可以用于从服务器获取商品列表数据，并将数据存储到 Redux store 中。
3. 使用中间件处理副作用
在 Redux 中，我们可以使用中间件来处理副作用，例如异步操作、日志记录、错误处理等。常用的中间件有 redux-thunk、redux-saga、redux-observable 等。
其中，redux-thunk 是最常用的中间件之一。它可以让我们在 action 中执行异步操作，并在异步操作完成后再 dispatch 一个普通的 action。
例如：
function fetchProducts() {
return async (dispatch) => {
dispatch({ type: 'FETCH_PRODUCTS_REQUEST' });
const response = await fetch('/api/products');
const products = await response.json();
dispatch({ type: 'FETCH_PRODUCTS_SUCCESS', payload: products });
};
}4. 使用 reselect 进行状态选择
在 React 应用中，我们通常需要从 Redux store 中选择一部分状态来渲染视图。这个过程需要进行计算，而且可能会比较复杂。为了避免不必要的计算和渲染，我们可以使用 reselect 库来进行状态选择。
reselect 可以缓存计算结果，并在状态变化时进行更新。这样可以避免不必要的计算和渲染，提高应用性能。
例如：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
----- ----------- - ------- -- ---------------
----- --------- - ------- -- -------------
------ ----- ------------------ - ---------------
------------- -----------
---------- ------- -- -
------ ------------------------- -- ---------------- --- --------
-
--这个例子中，我们使用 createSelector 来创建一个选择器，它可以根据 products 和 filter 状态来选择 visibleProducts 状态。
5. 使用 Redux DevTools 进行调试
在开发 Redux 应用时，我们可以使用 Redux DevTools 来进行调试。Redux DevTools 可以让我们查看应用状态和 action，以及进行时间旅行调试。
例如，我们可以使用 Redux DevTools 来查看应用状态变化：
总结
在 React SPA 应用中使用 Redux 的最佳实践包括将状态分解为独立的部分、使用异步 action 处理异步操作、使用中间件处理副作用、使用 reselect 进行状态选择以及使用 Redux DevTools 进行调试。这些实践可以让我们更好地使用 Redux，并避免一些常见的陷阱。
示例代码：https://github.com/reactjs/redux/tree/master/examples/shopping-cart
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65faa922d10417a22267d8bf