javascript 对象在 fetch 内不起作用

Question

function uiReducer(state = {
  authenticated: savedState ? savedState.uiState.authenticated : false,
  infoDialogVisible: false
}, action) {
  switch (action.type) {

    case 'LOGIN': 
      const url = 'http://localhost/api/api.php';
      fetch(url)
      .then((resp) => resp.json())
      .then(function(data) 
      {

        let info = data.results;
        if(info.auth === true) { alert("fdg");  Object.assign({}, state, {authenticated: true});  }

      })

已保存的州代码:######

let savedState = localStorage.getItem('AuthManagerState');
if (savedState) {
  savedState = JSON.parse(savedState);
}

上面的代码只是将登录模式设置为 true，但它不起作用，当我调试时，我意识到“已验证”未定义或其他内容，所以有人可以指出我做错了什么，因为我没有想法，我是这个 javascript 的新手。

谢谢。

Answer 1

您的代码所做的是根据 fetch 的响应更新 reducer 。不幸的是，该代码永远不会工作。

Redux 的 reducer 只是一个 Javascript 函数，这意味着它接受 (state & action) 中的输入，立即计算并返回新的状态值。它不等待任何异步进程，在您的情况下，它是 fetch 调用。所以无论你做什么，你都不能强制你的 uiReducer 等待 fetch 的响应到来并在那时更新。 reducer 不是这样工作的。

您需要阅读 Redux 的原始文档 handling async actions ，并且可能需要考虑使用 redux 异步操作的支持库，例如 redux-thunk、redux-promise 或 redux-saga。