Redux vs自定义钩子

Question

我同时学习了React和Redux，并全力投入Redux。基本上所有状态都存储在Redux中。我跟着标准allIds，byId状态形状图案为这里详述。

我的应用程序非常以数据为中心，它与API通讯，并且执行许多CRUD类型的操作-fetchAll，fetchById，添加，更新，删除。

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

我已经意识到不需要将所有内容都放在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...
}

当我需要在化简器中为更新操作设置状态时，我意识到如果使用“ allIds”和“ byId”模式会更容易。

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

最终看起来几乎是完全相同的代码，并且我失去了选择器的某些功能，但消除了redux-thunk的复杂性。而且我当前的redux动作包括特定的用例动作（例如，对于类型X的特殊保存），因此我需要为这些地方找到一个位置。

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

Answer 1

在 Redux 中存储状态的优点：

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

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

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

因此，如果满足以下条件，请使用 Redux：

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

在其他情况下，您可能更愿意将状态保留在 React 中（钩子或其他方式），因为它们会稍微简化您的代码。

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