提问者:小点点

如何在向还原传奇调度异步操作后捕获还原存储中的更改


在我的登录组件中,我尝试单击按钮登录,然后调用相应的函数“handleLogin”。在这个函数中,我使用我的用户凭据作为有效负载来调度异步函数。在我的故事中,我发出了一个请求,如果响应得到了这样的字段,我会将一个错误存储起来,否则我会在其中设置一个用户。默认情况下,存储中的错误字段为“false”。在我发送操作的组件中,我想知道成功/失败响应后存储区中错误字段的状态。当我尝试使用错误的凭据登录并将错误状态记录到控制台时,我首先得到的“old”(初始)值为error:false,而不是error:true。只有在第二次登录尝试后,错误才会设置为true。在调度异步操作之后,是否有方法知道存储中错误的实际状态?

还原剂:

const initialState = {
  userData: [],
  error: false
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
  case SET_USER:
    return {
      ...state,
      userData: action.payload
    }
  case SET_ERROR:
    return {
      ...state,
      error: action.payload
    }
  default:
    return state;
  }
};

SAGAS公司:

function* handleUserLoad(payload) {
  try {
    const user = yield call(
      loginUser,
      payload
    );
    if(user.data.errors) {
      yield put(setError(true))
    } else {
      yield put(setError(false))
      yield put(setUser(user.data.data.loginUser));
    }
  } catch (error) {
    console.log(error);
  }
}

export default function* userSaga() {
  while (1) {
    const {payload} = yield take(GET_USER);
    yield call(handleUserLoad,payload);
  }
}

部分登录组件:

const handleLogin = async() => {
    setShouldValidate(true);
    if (allFieldsSet) {
      try {
        loginUser(user)
        // LOGIN ERROR HERE DISPLAYS THE PREVIOUS STATE 'false'
        // INSTEAD OF ACTUAL TRUE AFTER loginUser
        // IF I LOG WITH WRONG CREDENTIALS
        console.log(loginError);
      } catch (e) {
        console.error(e);
      }
    }
  };

共2个答案

匿名用户

组件中的loginUser(user)是一个异步函数,因此不能指望控制台。日志(loginError)以在下一行中正确记录loginError的值。

解决方案:

第一:您可以将登录组件绑定到redux中的错误状态。Saga根据成功/不成功的响应修改状态后,您的登录组件将重新呈现。因此,在渲染中,如果您将控制台。log,则您可能会看到loginError的值正确出现。因此,在render中,您可以根据要显示的“loginError”放置所需的组件。

第二:您可以跳过使用Saga,直接在当前位置的login Component中等待登录API响应(使用fetch/axios从这里调用API)。在这种情况下,您将能够在等待调用完成后立即获得正确的登录响应,然后可以继续执行代码

匿名用户

我对商店中错误的默认值做了细微的修改。现在是' null '而不是false。因此,我可以检查它是否在useEffect中设置为false/true,并执行其他逻辑。