Redux 的调试工具及优化经验分享
Redux 是一种用于管理 JavaScript 应用程序的状态的极为流行的开源库，其提供了一种可预测的状态管理。但是，Redux 的开发过程中难免会遇到一些问题，特别是在调试和优化方面。在本文中，我们将介绍一些最好的 Redux 调试工具，并分享一些有关优化 Redux 应用程序的经验。
一、Redux 调试工具
- Redux DevTools
Redux DevTools 是开发者的常规选择。 它是一个浏览器插件和独立应用程序，它提供了一个简单的界面，用于检查 global state，分发操作和监视组件。 它支持导出和导入，以便您记录操作并与同事共享它们。
安装方法：
- 对于 Chrome，Firefox 和 Opera，请访问 Redux DevTools 扩展页面并安装。
- 对于其他浏览器，请下载 DevTools 的源代码或使用独立应用程序版本。
- Redux-Logger
Redux-Logger 是一个基本上不需要配置的日志记录器，可以直接安装并开始使用。它在控制台中输出有关每次分发操作的信息。
安装方法：使用 NPM 安装：
npm install redux-logger
将 Logger 应用于 Store：
import { createStore, applyMiddleware } from 'redux'; import logger from 'redux-logger'; import rootReducer from './reducers';
export default function configureStore(initialState) { const store = createStore( rootReducer, initialState, applyMiddleware(logger) );
return store; }
- Redux-Tools
Redux-Tools 是一个独立的桌面应用程序，可以让开发者直观地查看应用程序中的 action、reducer以及 virtual state。 它还为特定重现情况提供了一个“暴力计时旅行”调试器，并支持对操作进行筛选，以更好地查看有关特定操作的信息。
安装方法：通过前端包管理工具 NPM 进行安装。
运行以下命令即可：
npm install --save-dev redux-devtools
集成到 Redux 应用程序中：
import { createStore, applyMiddleware, compose } from 'redux'; import rootReducer from './reducers'; import DevTools from './containers/DevTools';
const enhancer = compose( // Middleware you want to use in development: applyMiddleware(d1, d2, d3), // Required! Enable Redux DevTools with the monitors you chose DevTools.instrument() );
export default function configureStore(initialState) { const store = createStore(rootReducer, initialState, enhancer);
// Hot reload reducers (requires Webpack or Browserify HMR to be enabled) if (module.hot) { module.hot.accept('./reducers', () => store.replaceReducer(require('./reducers')) ); }
return store; }
二、优化 Redux 经验
- 减少状态树的嵌套
如果迭代列表中的子节点，可以使用“平坦化”状态树。 这可以将状态更高效地更新，但是需要更多的代码来组成 state，但是这会使计算更容易，因为您可以使用 count(state.todos.visible) 而不是state.visibilityFilter(state.todos)(state)。 这也可以提高应用程序的可维护性。
- 将数据从组件中移除
组件是 React 应用程序中的分离，他们的主要职责是呈现数据并处理外部世界的视图事件和更改。 它们不能和 Redux 集成完美，一个常见的错误是将不必要的逻辑添加到组件中。 在 ActionTypes 中使用提示来更精细地控制此操作。
- 缓存重要的计算
计算非常重要的数据，它尽可能地减少渲染次数。 如果数据可以通过组件 props 传递（而不是组件 state），我们可以使用可应用程序级别的缓存来提高效率。
- 使用 Reselect 库来防止重复计算
Reselect 是一个独立的库，用于选择、缓存和组合 Redux 状态中的片段。 Reselect 使您可以从最简单的逻辑重复计算中，获得优化的效果。
下面是一个例子：
import { createSelector } from 'reselect'
const getVisibilityFilter = state => state.visibilityFilter const getTodos = state => state.todos
export const getVisibleTodos = createSelector( [getVisibilityFilter, getTodos], (visibilityFilter, todos) => { switch (visibilityFilter) { case 'SHOW_COMPLETED': return todos.filter(todo => todo.completed) case 'SHOW_ACTIVE': return todos.filter(todo => !todo.completed) default: return todos } } )
在上面的代码中，我们使用 createSelector 函数来计算 getVisibleTodos。 唯一必需的参数是一个元素数组，它代表目标选择器的输入。 在上面的示例中，收集 getVisibilityFilter 的返回值和 getTodos 的返回值，然后进行评估。 如果其中一个选择器提供的结果在以后调用不改变，结果将直接从缓存中读取。 如果您需要进一步优化性能，Reselect 还允许您使用多个缓存。
- 避免多个 Redux Store
使用单个存储进行操作是非常好的实践，最好的方法是保持一个整洁、干净的店面，尽可能地避免使用多个模块的状态嵌套和层状结构。
-- --- ------ - ----------- - ---- -------- ----- ------ - ---------------------- ----- ------ - ---------------------- ----------------- ----- -------- ----------------- ----- -------- -- ---- ------ - ------------ --------------- - ---- -------- ----- ------- - -------------------------- ----------- ----- ----- - --------------------- ---------------- ----- -------- ---------------- ----- --------
结论
在本文中，我们介绍了一些有关优化 Redux 应用程序的最佳实践和一些最流行的调试工具。 无论是用于大型还是小型应用程序，这些技巧都可以帮助您提高应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f1e6d5f5512810262fd37