javascript - ReactJS 中是否有一个函数可以在加载类中的任何内容之前等待 Redux Action 完成？

Question

是否可以在加载类中的任何内容之前等待 Redux 操作完成？

我有一个页面，它使用登录用户的数据，并且数据存储在 Redux 状态中。在我的 React 类中，我调用 Redux 状态中的数据来动态使用。如果用户未登录，代码将出现错误，因为登录数据不存在。如何使代码等待 Redux 操作来检查用户是否已登录，然后如果他们未登录，他们将在数据获取之前重定向到另一个页面呈现并在错误发生之前？

任何类似

on('REDUX_ACTION_LOGGED_IN', () => {})

会有用的。

我还看到了一个关于诸如 redux-wait-for-action 之类的在线包。有人可以教我如何在这里实现这个吗？文档不是很清楚。

Answer 1

我认为你可以用不同的方式看待这个问题。

您可以检查变量/数据是否存在，如果不存在则执行其他操作。

当状态改变时，Redux 会重新渲染组件。这意味着您不必等待它发生。

在你的渲染中可能会做这样的事情:

render(){
    <div>
       {someDataAfter.login ? <div> I am logged in!</div> : <div> I am logged out</div>}
    </div>  
}

只是为了完整起见 here is a link解释一下？ (三元 if)在渲染函数中。

另一种解决方案是用另一个组件包装该组件。该父组件可以检查用户是否已登录。如果是，那么您可以显示登录的组件:

render(){
   {loggedIn && <MySecuredComponent/>
}

在 loggedIn 为 true 之前，不会渲染或加载 MySecuredComponent。这意味着在 loggedIn 为 true 之前，componentDidMount 不会在 MySecuredComponent 中触发。