如何从库而不是 React 组件中调度 slice reducer答案

【问题标题】：How to dispatch slice reducer from a library not a React component如何从库而不是 React 组件中调度 slice reducer
【发布时间】：2021-07-20 19:45:07
【问题描述】：

我目前正在构建一个基于 https://github.com/react-boilerplate/react-boilerplate-cra-template 的 React 应用程序。

这个样板文件使用带有切片的 Redux。只要我想从 React 组件中更新状态，它就可以正常工作。但是，我正在努力从其他地方更新我的应用程序状态。在我的特殊情况下，我想在收到我未经授权的响应后立即发送注销事件，基本上是重置应用程序状态。

现在这显然可能发生在任何 API 请求中，因此我不希望在 React 组件中处理它，而是在处理 API 请求的 API 库中处理它。

根据我目前所阅读的内容，我应该能够通过简单地访问商店来调度事件。在此样板文件中，商店在src/index.tsx 文件中定义。所以在添加export 关键字之后，我想我可以做到这一点：

import { store } from 'index';
import { appActions } from 'app/slice';

console.log(store.getState());
store.dispatch(appAction.logout());

不知何故，这里的状态总是未定义的，即使当我通过 React 组件访问它时存在状态。此外，上面调用的 reducer 也从不接收已调度的事件。我还尝试用超时对其进行封装，以防这只是因为存储尚未初始化，但事实并非如此。

感谢您的帮助:)

【问题讨论】：

标签： reactjs typescript react-redux

【解决方案1】：

请尝试检查路径是否正确才能到达商店。

之后请重试。我觉得你的方法是对的。

如果不起作用，请尝试使用require方法

require('index');
require('app/slice');

console.log(store.getState());
store.dispatch(appAction.logout());

【讨论】：

路径正确。请看下面我的回答。谢谢！

【解决方案2】：

好的，这就是我最终实现它的方法：

我将切片的 React 钩子导入到 src/app/index.tsx 文件中

import { useAppSlice } from 'app/slice';

export function App() {

  // use the React hook
  useAppSlice();

  return (
    <BrowserRouter>
        ...
    </BrowserRouter>
  );
}

即使我没有在这个特定的控制器中使用切片，它也会以某种方式与存储“连接”，因此我可以在任何子控制器或任何库中使用切片。

【讨论】：