Question

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

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（）函数中进行任何设置。它应该纯粹用于显示当前状态，不应引起任何副作用。

所以我将商店创建移动到Constructor。

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

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

我建议redux-thunk进行异步操作。调度动作创建器允许您getState并相应地触发其他动作。

Answer 2

我获取存储令牌的方法是这样的：

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

        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>
        )
    }

//In componentDidMount because till then your redux store will be created and you are good to go.. 

    async componentDidMount() {
        try
       {
        const token = await store.get('token')
          if(token)
          {
            reduxStore.dispatch({type: LOGIN_USER});
          }
          else
          {
            console.log('invalid token') 
          }     
       }  
        catch(error) 
        { 
          console.log(error) 
        } 

      }

    }

有很多方法可以像你所做的那样解决这个承诺。然后其他就是回调，这是一种旧时尚技巧。

干杯:)

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

2 个答案: