javascript - 在react-native组件中实现async/await函数

Question

我正在尝试实现一个函数，该函数在渲染主“App”组件之前检查用户是否经过身份验证，但我无法在 promise 解决后运行我的代码。

class App extends Component {
    render() {
        const sagaMiddleware = createSagaMiddleware();
        const reduxStore = createStore(reducers, {}, applyMiddleware(ReduxThunk, sagaMiddleware));
        sagaMiddleware.run(Sagas)

        getToken = async () => {
            const token = await store.get('token')
            .then( (token) => {
                if (token !== null)
                    reduxStore.dispatch({type: LOGIN_USER});
            })
            .catch( (error) => console.log(error) )
        }

        getToken();

        return (
            <Provider store={reduxStore}>
                <Router>
                    <Scene key="root">
                        <Scene key="login" component={ LoginPageContainer } hideNavBar={true}/>
                        <Scene key="feed" component={ RequireAuth(FeedPageContainer) } initial={true} hideNavBar={true}/>
                    </Scene>
                </Router>
            </Provider>
        )
    }
}

export default App;

上面的代码工作得很好，只是它在 getToken() 函数完成之前渲染组件。我想我可能还没有完全理解 async/await 是如何工作的。提前致谢!

Answer 1

这段代码有几个问题。您不应该在 render() 函数中进行任何设置。它应该纯粹用于显示当前状态，不应该引起任何副作用。

所以我会将商店创建移至构造函数。

然后，您应该使用 redux connect helper 将组件连接到商店。

您也可以在构造函数中触发任何设置操作，例如检查 token 是否存在。

我推荐使用 redux-thunk 进行异步操作。调度操作创建者允许您获取状态并相应地触发其他操作。