usereducer不会更新状态

Question

我对useReducer的反应是非常陌生的。如果我在这里粘贴我的代码，它会很长，因为它涉及组件，useContext和useReducer.So，我将只粘贴一些代码。我对try and catch循环中的状态有疑问。我的reducer启动了一个使用firebase signInWithEmailAndPassword()的登录方法。我是不是做错了try and catch循环？我可以在console.log中看到错误消息，但我的状态不会随着错误消息而更新，无论是在then().catch()中还是在try和catch循环中。

  const loginUser = (usename, password, state) => {
    try{

      const res = auth.signInWithEmailAndPassword(email, password).then( user => {
          return {...state, userid: user.uid}
        }).catch(error => {
              return {...state, error: error.message}
        })


    }catch (error) {
      console.log("oops !! error: ", error);
   
      return {...state, error: error, isLoggedIn:false, isLoading:false};
    }
}

export const storeReducer = (state, action) => {
    switch (action.type) {
      case USER_LOGIN: 
      
        return loginUser(action.username, action.password, state);
          
      default:
        return state;
    }
  };

上面的代码是我在使用useReducer更新状态时遇到的问题的简化版本。

Answer 1

我会将您的loginUser函数更改为如下所示...

const loginUser = async (usename, password, state) => {
    try{
      const response = await auth.signInWithEmailAndPassword(email, password)

      return // return user here
    }catch (error) {
      console.log("oops !! error: ", error);
   
      return // return error here
    }
}

并且您应该根据此函数的返回来调度操作，或者从此函数调度。你不应该把这个函数放在你的归约器中，因为它是异步的，你的归约器应该是一个纯函数()。

应该更像..。

loginUser.then(data => {
  // dispatch accordingly
})