在 react-native 组件中实现 async/await 功能

Posted 2023-03-07

【中文标题】在 react-native 组件中实现 async/await 功能

【英文标题】：Implementing async/await function in react-native component

【发布时间】：2017-10-02 23:08:06

【问题描述】：

我正在尝试实现一个函数，该函数在呈现主“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 是如何工作的。提前致谢！

【问题讨论】：

你不应该在render方法中调用任何异步函数（或者一般来说，任何有副作用的函数）

好吧，getToken() 是异步的并返回一个承诺 - 但你不是 awaiting 那

你用的是什么路由器？看起来像 react-native-router-flux？如果是这样，它有一个可以连接到商店的开关组件。我用它来进行认证/未认证的切换，

【参考方案1】：

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

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

然后，你应该使用 redux connect helper 将组件连接到 store。

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

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

【参考方案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) 
         

      

    

还有更多的方法可以像您所做的那样解决承诺。th​​en() 其他方法是回调，这是一种老式技巧。

干杯:)