Javascript Redux vs定制钩子

我同时学习了react和Redux，并在Redux上“全力以赴”；基本上所有的状态都存储在。我遵循标准的

allid

，

byId

状态形状模式

我的应用程序非常以数据为中心，它与API对话，并执行许多CRUD类型的操作—fetchAll、fetchById、add、update和delete

API通信被隔离到“服务层”模块中，该模块是其自己的npm包。对该服务层的所有调用都在Redux操作中，使用

我意识到没有必要将大部分内容都放在Redux中，例如，数据确实需要放在特定组件上。我很想简化这个架构

所以我开始重构成一个定制的钩子。似乎因为我的状态形状更像是一个对象而不是标量，所以我应该使用

useReducer

而不是

useState

// reducer
// ------------------------- 
const initialState = {
  adding: false,
  updating: false,
  deleting: false,
  error: null,
  items: null
};
const reducer = (state, action) => {
// implementation omitted for brevity. . .
}
const useItemsApi = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // wrapped in useCallback because called in component's useEffect
  const fetchItems = useCallback(async (options) => {
    try {
      const resp = apiService.fetchItems(options);
    } catch (err) {
      if(err.status === 401) 
         // send to login screen
      else
         dispatch({type: 'error', payload: err});
    }
  }, [options]);

  // addItem, updateItem, deleteItem, etc...

  const actions = {fetchItems, updateItem, addItem, deleteItem};
  return [state, actions];
};

// component
// ------------------------- 
const component = (props) => {
  const [state, actions] = useItemsApi();
  const {fetchItems, updateItem, addItem, deleteItem} = actions;
  useEffect(() => {
     fetchItems()
  }, fetchItems);

  // omitted for brevity...
}

当我开始在reducer中设置更新操作的状态时，我意识到如果使用“allid”和“byId”模式会更容易

在这一点上，我想-这和使用Redux有什么不同

它最终看起来几乎是完全相同的代码，我失去了一些选择器的功能，但消除了redux thunks的复杂性。我当前的redux操作包括特定的用例操作（例如，为项目类型X进行特殊保存），所以我需要为这些操作找到一个位置

---

我的问题是-是否有任何理由使用本地状态将其重构为一个钩子

在Redux中存储状态的优点：

• 您可以全局访问和修改它
• 即使在卸载组件后，它仍然存在

---

在组件中存储状态的优点：

• 在状态中可以有多个具有不同值的组件，这可能是您想要的
• …或者您甚至可以在一个组件中有多个相同类型的挂钩
• 您不需要在文件之间切换。根据代码的组织方式，对于使用它的组件，Redux可以分为3个文件+1个文件-虽然这有助于保持代码的良好结构以适应复杂的用例，但对于跟踪简单的状态来说，这可能是一种过分的做法。必须在多个文件之间切换才能处理一个组件会降低您的工作效率（我不喜欢在IDE中为我处理的每个功能跟踪4个选项卡）
• （此外，挂钩是新的和酷的。）

因此，在以下情况下使用Redux：

• 您需要在多个组件之间共享状态（或计划在将来共享）
• 即使使用状态的组件已卸载，也需要保持状态

在其他情况下，您可能更愿意将状态保持在React（hooks或其他）中，因为它们稍微简化了代码

---

但这并不意味着您需要重构整个代码库。如果您认为您的代码足够简洁，并且喜欢它的组织方式，或者如果您不确定将来是否需要全局状态，您可以将其保留在Redux中—这没有什么错

对我来说，这真的归结为三件事：

无论您是否需要Redux的中间件、日志功能等

你有多关心未来的稳定

个人品味

Redux提供的不仅仅是状态管理。
将上下文处理卸载到Redux是我展望未来的一大优势。
如果您的应用程序非常以数据为中心，我不会忽略redux devtools和其他中间件（我个人喜欢redux observable）。
当你的应用程序变得越来越复杂时，你会想了解损坏的状态更新和意外触发多次的状态。
但话说回来，只有你才能评估你自己的应用程序的复杂性，以及它在未来的发展方向

这篇文章的其余部分是“个人品味”，但我会补充一下

就我个人而言，我喜欢使用Redux的原因与前面提到的不同。
不久前，我使用Redux时根本没有使用React，而且还使用了一个可能没有人听说过的框架，即Salesforce的Lightning web components框架。
关键在于它将状态管理和视图逻辑保存在单独的库中。
我个人并不赞成成为瑞士军刀 React对我来说的核心优势是它是一个具有虚拟DOM的视图库，目的明确，而现在。。。那么，这两者之间的界限在哪里才刚刚成为一个固执己见的框架呢？
使用React钩子并不是强制的，但同样是强制的。
如果你使用React，你将使用它的全部，这个问题为这个结论带来了敬意

在这一点上，我想-这和使用Redux有什么不同

所以你重构Redux到

useReducer

hook，然后想知道，为什么我需要这个？ 如果你问，那么你可能没有问。
也许这就是你问题的答案。
Reducer功能刚刚从状态管理库移动到视图库（或者是吗？）。酷（我想）

不，你不必。 在我看来，如果只是作为一个状态管理库，Redux可以被hook（

useReducers

ect）+本地/共享状态所取代

Redux先于hooks，我们的应用程序已经由Redux实现，您肯定不需要替换它

我们可以计划在新项目中使用hooks+共享状态作为替代方案

我确实遇到了三种情况，分别是：

• 仅限Redux
• 仅挂钩
• Redux+挂钩

他们都做得很好

我们正处于Redux和Hooks的过渡中，这是一个两难的问题。钩子的制作方式不会取代redux，但如果您愿意，它可以

所以在将来，您可以使用其中的任何一种，这取决于您的用例

---

希望有帮助。

这是相同的模式，但在本地使用。所以这是不同的