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但它不起作用，当我调试时，我意识到已经过认证＆＃39;没有定义，或者某些事情，有人可以指出我做错了什么，因为我不知道，我是这个javascript的新手。

感谢。

Answer 1

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

Redux的reducer只是一个Javascript函数，这意味着它需要输入（state＆amp; action），立即计算并返回新的状态值。它不会等待任何异步进程，在您的情况下，它是获取调用。所以无论你做什么，你都不能强迫你的uiReducer等到获取的响应到来并在那时更新。减速器不起作用。

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

Answer 2

这不足以理解正在发生的事情。

您需要包含savedState的内容。根据这段代码，它不存在。
如果您看到“已验证”的内容未定义，则可能是因为savedState.uiState未定义且您正在尝试访问uiState.authenticated。

您可能必须这样做：

(savedState && savedState.uiState && savedState.uiState.authenticated) || false

或者这可以起作用

!!(savedState && savedState.uiState && savedState.uiState.authenticated)

您还希望将Object.assign值与 return 一起使用，如下所示：

return Object.assign({}, state, {authenticated: true});

更大的问题是reducer在返回之前不能等待fetch完成，所以它什么都不返回。您将需要此reducer之外的东西（例如，单击处理程序）来完成获取，然后从中调度LOGIN操作，如下所示：

handleClick = () => {
  const url = 'http://localhost/api/api.php';
  fetch(url)
    .then((resp) => resp.json())
    .then((data) => {
      let info = data.results;
      if(info.auth === true) {
        alert("fdg"); 
        this.props.dispatchLoginAction({
          type: 'LOGIN'
        })
      }
    })
}

然后你的减速器看起来像这样：

function uiReducer(state = {
  authenticated: savedState ? savedState.uiState.authenticated : false,
  infoDialogVisible: false
}, action) {
  switch (action.type) {
    case 'LOGIN':
      return Object.assign({}, state, {authenticated: true});
  }
}

您将需要使用redux bindActionCreators和dispatch来构造dispatchLoginAction函数，如果您不了解如何执行这些操作，则需要在redux文档中阅读它们。

Answer 3

第二个应该是res.json（）。不要关闭那里的支架。

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

  })

此外，我不确定此行中savedState的来源。 authenticated: savedState ? savedState.uiState.authenticated : false,

javascript对象在fetch中不起作用

3 个答案: