|
|
|
|
公众号矩阵

React Hooks和Redux哪个才是更好的状态管理策略?

本文先介绍了如何使用Redux Toolkit的综合状态管理策略,去实现全局存储;然后探究了一个简单的应用程序,如何通过使用核心的React Hooks,去实现状态管理的各个细节;最后得出两者可以混合使用,相互补足的使用建议。

作者:陈峻来源:51CTO|2021-09-28 09:00

【51CTO.com快译】如果您是一名React开发人员,那么一定对状态管理策略并不陌生。当我们在使用React去构建Web应用时,所有信息都被保存在所谓的状态之中。我们只需要更新该状态,即可实现对Web应用的更新。而状态管理,是指在应用程序的生命周期中,处理各种事件,并控制不同组件之间数据传递的过程。

一直以来,我们都习惯于使用针对JavaScript应用的、流行且强大的Redux库,作为状态容器。而React本身在其16.8版中已增加了Hooks。在本文中,我将根据自己在使用React SDK,构建生产级数据可视化工具过程中的经验,和您探讨这两种状态管理的方法,并介绍作为第三种方法的混合使用。

状态管理战略规划

首先,让我们来考虑状态管理的两个难题:需要存储什么状态,以及为什么要如此。毕竟,在数据可视化的应用中,并非所有状态都是相同的。

如下应用示例所示,我们希望通过图表中显示的节点和链接,以获悉当前的各个连接,以及与时间线组件共享的数据,进而甄别出数据集中的时间戳。其Sidebar包括了用于搜索和更新图表、及时间线的UI元素。简单而言,我们的目标就是实现如下图形和时间线的可视化。具体请参见--KronoGraph(。

在状态管理策略的规划阶段,我们可以通过在轴上绘制状态,以了解正在处理的具体内容:

如上图所示,我们在此所遵循的原则为:

  • 条目类型:除非您正在构建一个通用应用,否则图表和时间线中的节点类型(如:人员、地点、车辆)都应当尽可能是静态的。由于我们可以提前定义它们,因此它们不需要带有状态,可以位于存储库的配置文件中。
  • 条目样式:包含了每个节点和链接类型的核心样式,以及它们的预期逻辑。
  • 主题选择:为用户提供了在暗模式与亮模式之间切换的选项,并通过该状态的变化,去跟踪用户的偏好。
  • UI状态:UI状态包括静态和临时等。虽然我们没有必要在状态中,存储所有关于表单的交互,但是需谨防那些可能导致应用处于无响应状态的常见错误。
  • 条目位置和时间线范围:网络中的节点位置可能并不固定:
  1. 在图表中,用户可以根据偏好进行布局,并手动定位节点。
  2. 在时间线中,用户可以放大其感兴趣的时间范围。
  3. 在不同的会话中,通过位置的保持,用户可以从上一次中断处继续。
  • 撤消与重做栈:在高级应用中,我们需要通过设计,让用户能够在各自的当前会话中,保留撤消与重做数据的权限。
  • 来自API的数据:功能强大的应用程序,需要将那些从外部端点或API接收来的、动态且临时的数据缓存起来,并保存它们在应用中的状态。

状态管理的方法

有了前面状态管理的规划,我们来考虑应用中的数据层次结构。目前,我们有三种主要的状态管理方法可供选择:

  • 处理组件中的状态,并按需使用Hook在状态间进行传递。这种方法通常被称为“prop drilling”或“提升状态”,常被推荐用于基础类的应用。
  • 使用某种全局存储,以便所有组件都可访问。Redux之类的库可以提供该功能。
  • 使用混合方法,将Hook与那些经过慎重选择的重要状态相结合。

下面,让我们通过上述数据可视化的应用,来进一步探索这三种方法。

Redux状态管理

自2015年被发布以来,Redux已经成为了React生态系统的关键部分。它使用不变性(immutability)来简化应用程序的开发和逻辑设计。通过将处于某种状态的所有条目,强制设置为不变性,我们可以跟踪对于数据的任何更改,进而避免可能导致意外错误发生的数据突变。

虽然Redux目前仍是状态复杂的大型应用的绝佳选择,但是随着时间的推移,它变得日渐臃肿。为了协助降低其复杂性,Redux Toolkit于2019年应运而生,并成为了Redux的首推方式。

一致性的状态更新

Redux的一个核心概念是reducer。对于那些具有函数编程经验的人而言,这是一个能够接受多个输入,并将其减少为单个输出的函数。在状态管理中,该扩展能够让您通过采用一个或多个状态的更新指令,为图表生成一致性的状态更新。

让我们来考虑一个标准化的图形可视化用例:在图表中添加和删除节点。为了在全局存储中创建一个状态“切片”,我们在store.js中创建了如下代码:

JavaScript

  1. import { configureStore } from '@reduxjs/toolkit'
  2. import itemsReducer from '../features/chart/itemsSlice'
  3.   
  4. export const store = configureStore({ 
  5.  reducer: { 
  6.    items: itemsReducer 
  7.  } 
  8. }); 

为了让应用程序中的其他组件能够访问该存储,我们可以对应用程序进行如下“包装”:

JavaScript

  1. importReactfrom 'react'
  2. import ReactDOM from 'react-dom'
  3. import './index.css'
  4. import App from './App'
  5. import { store } from './app/store'
  6. import { Provider } from 'react-redux'
  7. import * as serviceWorker from './serviceWorker'
  8.   
  9. ReactDOM.render( 
  10.  <React.StrictMode> 
  11.    <Provider store={store}> 
  12.      <App /> 
  13.    </Provider> 
  14.  </React.StrictMode>, 
  15.  document.getElementById('root'
  16. ); 

其中的Provider段意味着,其任何下游都可以访问该存储。在itemsSlice.js中,我们为各个条目定义了状态切片:

JavaScript

  1. import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'
  2.   
  3. export const itemsAdapter = createEntityAdapter(); 
  4. const initialState = itemsAdapter.getInitialState(); 
  5.   
  6. export const itemsSlice = createSlice({ 
  7.  name'items'
  8.  initialState, 
  9.  reducers: { 
  10.    addItems: itemsAdapter.addMany, 
  11.    addItem: itemsAdapter.addOne, 
  12.    removeItems: itemsAdapter.removeMany, 
  13.    removeItem: itemsAdapter.removeOne, 
  14.  }, 
  15. }); 
  16.   
  17. export const { addItems, addItem, removeItems, removeItem } = itemsSlice.actions; 
  18.   
  19. export const { select, selectAll, selectTotal } = itemsAdapter.getSelectors((state) => state.items); 
  20.   
  21. export default itemsSlice.reducer; 

通过上述代码段,我们可以获悉:

  • ReGraph的条目是各种通过ID索引的节点和链接对象。其核心数据结构十分常见。Redux Toolkit会通过一些辅助函数,来处理此类格式数据。在此,我们用到了由createEntityAdapter提供的addMany、addOne、removeMany、以及removeOne等功能。
  • 在Redux中,Selector允许我们从存储中获取一个状态片。我可以利用getSelectors适配器,来避免自行编写状态查询代码。
  • 最后,我们导出所有内容,以便在应用程序的其他地方使用。

在应用的其他代码中,我们还用到了store、reducer和selectors:

JavaScript

  1. import React from 'react'
  2. import { useSelector, useDispatch } from 'react-redux'
  3.   
  4. import { Chart } from 'regraph'
  5. import { addItems, addItem, removeItems, removeItem, selectAll, selectTotal } from './itemsSlice'
  6.   
  7. import mapValues from 'lodash/mapValues'
  8.   
  9. import styles from './NetworkChart.module.css'
  10.   
  11. const colors = ['#173753''#6daedb''#2892d7''#1b4353''#1d70a2']; 
  12.   
  13. const defaultNodeStyle = (label) => ({ 
  14.  label: { 
  15.    text: `User ${label}`, 
  16.    backgroundColor: 'transparent'
  17.    color: 'white'
  18.  }, 
  19.  border: { width: 2, color: 'white' }, 
  20.  color: colors[(label - 1) % colors.length], 
  21. }); 
  22.   
  23. const styleItems = (items, theme) => { 
  24.  return mapValues(items, (item) => { 
  25.    if (item.id1) { 
  26.      return { ...defaultLinkStyle(item.id), ...theme[item.type] }; 
  27.    } else { 
  28.      return { ...defaultNodeStyle(item.id), ...theme[item.type] }; 
  29.    } 
  30.  }); 
  31. }; 
  32.   
  33. export function NetworkChart() { 
  34.  const dispatch = useDispatch(); 
  35.   
  36.  const items = useSelector(selectAll); 
  37.  const itemCount = useSelector(selectTotal); 
  38.   
  39.  const theme = { user: {} }; 
  40.  const styledItems = styleItems(items, theme); 
  41.   
  42.  return ( 
  43.    <div className={styles.container}> 
  44.      <Chart 
  45.        items={styledItems} 
  46.        animation={{ animate: false }} 
  47.        options={{ backgroundColor: 'rgba(0,0,0,0)', navigation: false, overview: false }} 
  48.      /> 
  49.      <div className={styles.row}> 
  50.        <button 
  51.          className={styles.button} 
  52.          aria-label="Add items" 
  53.          onClick={() => dispatch(addItem({ id: itemCount + 1, type: 'user' }))} 
  54.        > 
  55.          Add User 
  56.        </button> 
  57.        <button 
  58.          className={styles.button} 
  59.          aria-label="Remove Items" 
  60.          onClick={() => dispatch(removeItem(itemCount))} 
  61.        > 
  62.          Remove User 
  63.        </button> 
  64.      </div> 
  65.    </div> 
  66.  ); 

通过使用Redux Hook的suseSelector,我们可以轻松利用切片代码,来提供选择器。同时,其useDispatch允许我们根据状态的“调度(dispatch)”动作(Redux的另一个实用部分),去变更状态。

使用Redux管理状态去添加和删除节点

Redux Toolkit使用时下流行的不变性库--Immer,对状态进行“纯净”地更新,而无需额外编写复杂的克隆和更新逻辑。在此,我们直接在组件中设置了图表项的样式。

当您从外部来源获取数据时,应用程序的状态和数据库的存储之间,很难被清晰地界定。与Redux Toolkit同源的RTK Query则通过与诸如react-query之类的库相配合,避免了从零开始编写缓存等功能。

如果您的应用单纯依赖Redux,那么可以将整个应用的状态放在全局存储中,以便每个组件都能访问它。当然,实际上只有某一些可视化组件的状态,需要通过Hooks和Redux的混合方法,实现存储。

Prop Drilling

著名的软件工程教育者--Kent C. Dodds曾提出了一个重要的观点:应保持状态尽可能地靠近需要的地方。对于上述示例,这意味着如果我们希望在图表和时间线组件之间共享数据,则可以通过Prop Drilling来简化并实现。这将是一种跨组件共享状态的有效且纯净的方式。也就是说,如果我们将状态带到VisualizationContainer应用中,则可以将数据作为prop传递到每个组件处。当然,如果我需要在复杂的层次结构中上下传递,则仍可以使用Redux。

凭借着其强大的API和一些精心设计的prop,ReGraph在控制其内部状态方面,非常有效。我们甚至不需要让过多的prop流转到图表的组件之外。

React Hooks

就示例中的图表组件而言,我们可以使用simpleuseState和useRefHooks,来处理状态中的基本配置。ReGraph可以将那些对于状态的多次更新处理,通过单独调用useState对方式来实现,进而免去了prop组的频繁更新。

JavaScript

  1. const [layout, setLayout] = useState(defaults.layout); 
  2. setLayout({name'sequential'}) 

对于使用过Redux的人来说,Hook的useReducer以及如下代码段,一定不会陌生。

JavaScript

  1. import React, { useState, useReducer, useCallback } from 'react'
  2.   
  3. const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine) 
  4.   const combineItems = useCallback(property => combineDispatch({ type: 'COMBINE', property }), []) 
  5.   const uncombineItems = useCallback(property => combineDispatch({ type: 'UNCOMBINE', property }), []) 
  6.   
  7.   
  8. function combineReducer(combine, action) { 
  9.   const newCombine = { ...combine }; 
  10.   if (action.type === 'COMBINE') { 
  11.     newCombine.properties.push(action.property); 
  12.     newCombine.level = combine.level + 1; 
  13.   } 
  14.   else if (action.type === 'UNCOMBINE') { 
  15.     newCombine.properties.pop(); 
  16.     newCombine.level = combine.level - 1; 
  17.   } else { 
  18.     throw new Error(`No action ${action.type} found`); 
  19.   } 
  20.   return newCombine; 

值得注意的是,没有了Redux Toolkit的帮助,我们需要人工更新已组合的对象。这就意味着,更多的代码需要被编写。在上述ReGraph之类的小型应用示例中,我们手动编写了reducer。

React的useReducer与Redux中的reducer之间存在概念上的差异。在React中,我们编写了任意数量的reducer。它们只是各种便于更新状态的Hooks。而在Redux中,它们作为概念性的分离,以应对集中式的存储。

正如下面代码段所示,我们可以为ReGraph编写一个定制的Hook,来封装所有需要用到的prop:

JavaScript

  1. import React, { useState, useReducer, useCallback } from 'react'
  2.   
  3. import { has, merge, mapValues, isEmpty } from 'lodash'
  4. import { chart as defaults } from 'defaults'
  5.   
  6. const linkColor = '#fff9c4'
  7. const nodeColor = '#FF6D66'
  8.   
  9. function isNode(item) { 
  10.   return item.id1 == null && item.id2 == null
  11.   
  12. function transformItems(items, itemFn) { 
  13.   return mapValues(items, (item, id) => { 
  14.     const newItem = itemFn(item, id); 
  15.     return newItem ? merge({}, item, newItem) : item 
  16.   }); 
  17. }; 
  18.   
  19. function styleItems(items) { 
  20.   return transformItems(items, item => { 
  21.     return defaults.styles[isNode(item) ? 'node' : 'link']; 
  22.   }); 
  23.   
  24.   
  25. function itemsReducer(items, action) { 
  26.   const newItems = { ...items }; 
  27.   if (action.type === 'SET') { 
  28.     return { ...newItems, ...styleItems(action.newItems) } 
  29.   } 
  30.   else if (action.type === 'REMOVE') { 
  31.     Object.keys(action.removeItems).forEach(removeId => { delete newItems[removeId]; }) 
  32.     return newItems; 
  33.   } else { 
  34.     throw new Error(`No action ${action.type} found`); 
  35.   } 
  36.   
  37. function combineReducer(combine, action) { 
  38.   const newCombine = { ...combine }; 
  39.   if (action.type === 'COMBINE') { 
  40.     newCombine.properties.push(action.property); 
  41.     newCombine.level = combine.level + 1; 
  42.   } 
  43.   else if (action.type === 'UNCOMBINE') { 
  44.     newCombine.properties.pop(); 
  45.     newCombine.level = combine.level - 1; 
  46.   } else { 
  47.     throw new Error(`No action ${action.type} found`); 
  48.   } 
  49.   return newCombine; 
  50.   
  51. function useChart({ initialItems = {} }) { 
  52.   
  53.   const styledItems = styleItems(initialItems) 
  54.   
  55.   const [items, dispatch] = useReducer(itemsReducer, styledItems) 
  56.   const addItems = useCallback(newItems => dispatch({ type: 'SET', newItems }), []) 
  57.   const removeItems = useCallback(removeItems => dispatch({ type: 'REMOVE', removeItems }), []) 
  58.   
  59.   const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine) 
  60.   const combineItems = useCallback(property => combineDispatch({ type: 'COMBINE', property }), []) 
  61.   const uncombineItems = useCallback(property => combineDispatch({ type: 'UNCOMBINE', property }), []) 
  62.   
  63.   const [animation, setAnimation] = useState(defaults.animation); 
  64.   const [view, setView] = useState(defaults.view); 
  65.   
  66.   const [layout, setLayout] = useState(defaults.layout); 
  67.   const [positions, setPositions] = useState(defaults.positions); 
  68.   const [selection, setSelection] = useState(defaults.selection); 
  69.   const [map, setMap] = useState(defaults.map); 
  70.   
  71.   const [options, setOptions] = useState(defaults.options); 
  72.   
  73.   const chartState = { items, options, layout, positions, selection, map, animation, combine } 
  74.   return [chartState, { addItems, removeItems, setPositions, setSelection, combineItems, uncombineItems }] 
  75.   
  76. export { useChart, isNode } 

值得注意的是,由于ReGraph会针对每一个prop用到大量的useState调用,因此我们可以将它们放入一个简单的对象中,并通过单个函数处理,来实现更新。为了简单起见,我们可以使用lodash merge,来合并条目的更新。同时,在生产环境中,我们会使用Immer之类的工具,来提高更新的效率。

Context API

我们定制的useChart Hook足以满足让单个组件去控制图表。但是,我们又该如何处置Sidebar呢?此时,我们就需要通过全局范围的Redux来解决。

作为React API的一部分,由于Context可以让各种数据在用户定义的范围内,被访问到,因此它可以协助我们实现在Redux中,创建全局存储。

虽然,业界有对于context是否能成为Redux useContext替代品的争论,但是有一点可以肯定:它是一种纯净的API,可以在组件之间一致性地共享context。 如下代码段展示了如何使用Hook和Context:

JavaScript

  1. import React, { useState, useReducer, useCallback } from 'react'
  2.   
  3. import merge from 'lodash/merge'
  4. import mapValues from 'lodash/mapValues'
  5.   
  6. import { chart as defaults } from 'defaults'
  7.   
  8. const ChartContext = React.createContext(); 
  9.   
  10. function isNode(item) { 
  11.  return item.id1 == null && item.id2 == null
  12.   
  13. function transformItems(items, itemFn) { 
  14.  return mapValues(items, (item, id) => { 
  15.    const newItem = itemFn(item, id); 
  16.    return newItem ? merge({}, item, newItem) : item; 
  17.  }); 
  18.   
  19. function styleItems(items) { 
  20.  return transformItems(items, (item) => { 
  21.    return defaults.styles[isNode(item) ? 'node' : 'link']; 
  22.  }); 
  23.   
  24. function itemsReducer(items, action) { 
  25.  const newItems = { ...items }; 
  26.  if (action.type === 'SET') { 
  27.    return { ...newItems, ...styleItems(action.newItems) }; 
  28.  } else if (action.type === 'REMOVE') { 
  29.    Object.keys(action.removeItems).forEach((removeId) => { 
  30.      delete newItems[removeId]; 
  31.    }); 
  32.    return newItems; 
  33.  } else { 
  34.    throw new Error(`No action ${action.type} found`); 
  35.  } 
  36.   
  37. function combineReducer(combine, action) { 
  38.  const newCombine = { ...combine }; 
  39.  if (action.type === 'COMBINE') { 
  40.    newCombine.properties.push(action.property); 
  41.    newCombine.level = combine.level + 1; 
  42.  } else if (action.type === 'UNCOMBINE') { 
  43.    newCombine.properties.pop(); 
  44.    newCombine.level = combine.level - 1; 
  45.  } else { 
  46.    throw new Error(`No action ${action.type} found`); 
  47.  } 
  48.  return newCombine; 
  49.   
  50. function ChartProvider({ children }) { 
  51.  const [items, dispatch] = useReducer(itemsReducer, {}); 
  52.  const addItems = useCallback((newItems) => dispatch({ type: 'SET', newItems }), []); 
  53.  const removeItems = useCallback((removeItems) => dispatch({ type: 'REMOVE', removeItems }), []); 
  54.   
  55.  const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine); 
  56.  const combineItems = useCallback((property) => combineDispatch({ type: 'COMBINE', property }),[]); 
  57.  const uncombineItems = useCallback((property) => combineDispatch({ type: 'UNCOMBINE', property }),[]); 
  58.   
  59.  const [animation, setAnimation] = useState(defaults.animation); 
  60.  const [view, setView] = useState(defaults.view); 
  61.   
  62.  const [layout, setLayout] = useState(defaults.layout); 
  63.  const [positions, setPositions] = useState(defaults.positions); 
  64.  const [selection, setSelection] = useState(defaults.selection); 
  65.  const [map, setMap] = useState(defaults.map); 
  66.   
  67.  const [options, setOptions] = useState(defaults.options); 
  68.   
  69.   
  70.  const value = [ 
  71.    { view, items, options, layout, positions, selection, map, animation, combine }, 
  72.    { addItems, removeItems, setOptions, setMap, setView, setLayout, setAnimation, setPositions, setSelection, combineItems, uncombineItems }, 
  73.  ]; 
  74.   
  75.  return <ChartContext.Provider value={value}>{children}</ChartContext.Provider>; 
  76.   
  77. function useChart() { 
  78.  const context = React.useContext(ChartContext); 
  79.  if (context === undefined) { 
  80.    throw new Error('useChart must be used within a ChartProvider'); 
  81.  } 
  82.  return context; 
  83.   
  84. export { ChartProvider, useChart }; 

下面,我使用定制的ChartProvider上下文,来包装那些需要访问图表的详细信息,以及设置器的任何组件:

HTML

  1. <App> 
  2.     <ChartProvider> 
  3.         <VisualizationContainer> 
  4.             <Chart/> 
  5.             <Timeline/> 
  6.         </VisualizationContainer> 
  7.         <Sidebar/> 
  8.     </ChartProvider> 
  9. </App> 

接着,我们需要通过如下简单的调用,导入useChart,并获取当前图表的状态,以及应用层次结构中任意位置的调度函数。

  1. const  [state, { setLayout }] = useChart(); 

Context与Redux

可见,使用Context和Redux存储之间的关键区别在于,Context必须由您来定义范围,而不会自动地为应用程序的其余部分提供服务。这会迫使我们更加有意识地去规划应用程序的逻辑。正如useReducer那样,我们通常的做法是:创建许多不同的上下文,以供应用程序去使用。

小结

综上所述,我们先介绍了如何使用Redux Toolkit的综合状态管理策略,去实现全局存储;然后探究了一个简单的应用程序,如何通过使用核心的React Hooks,去实现状态管理的各个细节;最后得出两者可以混合使用,相互补足的使用建议。

原文标题:React Hooks vs. Redux: Choosing the Right State Management Strategy ,作者:Christian Miles

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 可以在 Nginx 中运行 JavaScript,厉害了!
  3. JavaScript:怎么将颜色字符串转为对象?
  4. 10个清晰实用更显专业的JavaScript代码片段
  5. 十三个优秀的 React JavaScript 框架
  6. JavaScript中数组超级好用的方法
【责任编辑:华轩 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

47人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

14人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

42人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微