2

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

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 是如何工作的。提前致谢！

4

2 回答 2

2

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

所以我会将商店创建移至Constructor。

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

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

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

于 2017-05-04T16:48:23.893 回答
0

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

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

      }

    }

有更多的方法来解决承诺，就像你所做的那样 .then() 其他是回调，这是一种老式的技巧。

干杯:)

于 2017-05-04T19:52:18.447 回答