Question

当我在调度另一个动作后发出动作时，我注意到我的状态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
  }
}

Answer 1

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

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

或

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

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

1 个答案: