Redux Thunk - 调度多个操作后状态未定义答案

【问题标题】：Redux Thunk - State Undefined After Dispatching Multiple ActionsRedux Thunk - 调度多个操作后状态未定义
【发布时间】：2018-07-23 13:51:27
【问题描述】：

当我在分派另一个动作后分派一个动作时，我注意到我的状态 isFetching 变为未定义。我认为这可能是动作在另一个之后调度的一些异步问题。我将如何解决这个问题，以便我可以正确调度这两个动作？

我的 redux 模块：

const FETCHING = 'FETCHING'
const FETCHING_KEYWORD = 'FETCHING_KEYWORD'

function fetching() {
  return {
    type: FETCHING,
  }
}

function settingKeyWord(keyWord) {
  return {
    type: FETCHING_KEYWORD,
    keyWord,
  }
}

export function fetchKeyWord (keyWord) {
  return (dispatch, getState) => {
    const { isFetching } = getState()
    const { keyWord } = getState()

    // After I dispatch the two actions here, isFetching becomes undefined
    dispatch(fetching())
    dispatch(settingKeyWord(keyWord))
  }
}

const initialState = {
  isFetching: false,
  keyWord: '',
}

export default function results(state = initialState, action) {
  switch (action.type) {
    case FETCHING:
      return {
        isFetching: true,
      }
    case FETCHING_KEYWORD:
      return {
        keyWord: action.keyWord,
      }
    default:
      return state
  }
}

【问题讨论】：

标签： redux

【解决方案1】：

reducer 案例需要返回整个状态，而不仅仅是更新的部分，因此在正常调度任一操作时也会出现问题。您可以在 reducer 案例中使用 Object.assign 或对象扩展语法来修复它。例如，对于Fetching：

case FETCHING:
  return Object.assign((), state, { 
    isFetching: true,
  })

或

case FETCHING:
  return {...state,
    isFetching: true,
  })

【讨论】：

啊，当然！谢谢一堆。 ImmutableJS 也可以。