时间戳

首页 > 解决方案 > React redux - 在提供程序之外的 App.js 中分派？

javascript - React redux - 在提供程序之外的 App.js 中分派？

问题描述

让我解释一下我的问题。我有一个使用 Redux 对 RBAC 模型做出反应的应用程序。为此，我需要在加载我的应用程序时在 useEffect 中调用我的 dispatch() 以检查用户是否经过身份验证。如果是，我需要发送它包含在 jwt 令牌中的信息。

所以我做了这样的事情（在 App.jsx 中）：

const App = () => {
  
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const dispatch = useDispatch()

  const authentication = () =>
    isAuthenticated ? (
      <Redirect to="/app" />
    ) : (
      <PublicRoutes />
  );
 
  useEffect(() => {
    setIsAuthenticated(Auth.isAuth())
    if(isAuthenticated){
      store.dispatch(setConnectedUser({name:"Jude"}))
    }
  }, [isAuthenticated])

  const store = createStore(rootReducer, composeWithDevTools(
    applyMiddleware(thunk),
  ));

    return (
    <Provider store={store}>
      <HashRouter>
        <Switch>
          <Route path="/app" component={PrivateRoutes} />
          <Route path="" render={authentication} />
        </Switch>
      </HashRouter>
    </Provider>
    );
}

export default App;

ReactDOM.render(<App />, document.getElementById("root"))

Auth.isAuth() 只是获取令牌，检查令牌是否仍然有效，如果是则返回 true。

但事情是这样的，通过这种方式我犯了一个错误：未捕获的错误：找不到 react-redux 上下文值；请确保组件被包裹在一个

我知道错误来自我想在提供者之外 dispatch() 的事实，但是可以这样做吗？还是我会做错？这是我第一个使用 Redux 的项目，也许我没有完全理解它是如何工作的？

知道 dispatch() 工作得很好，之前在登录时调用了它，但是我的标题上有一个错误，它将从减速器中检索信息，它试图在存储信息出现之前显示它，这就是为什么我想在应用程序加载时进行控制，而不仅仅是在登录时。

标签： javascriptreactjsredux

解决方案

使用您的代码，您无法在此组件中使用 redux，只能在他的所有孩子中使用。

您可以将提供程序设置在外部，可能在 index.js 中（或者您执行 ReactDOM.render() 或任何高级调用的任何地方）。

或者，如果您愿意，您可以创建将在 App.js 中使用的任何新元素，例如“router.js”或类似内容，您可以在其中检查您的逻辑并重定向到您想要的位置。

推荐阅读