React & Redux: Диспетчерское действие не работает

Question

У меня есть сценарий, в котором я отправляю действие после успешного вызова API.

axios.get(url)
       .then(response => {
         console.log("RESPONDED", response, dispatch)
         const payload = response
         dispatch(fetchSucess(payload))
       })

Фрагмент fetchSucess:

const fetchSucess = (payload) => (dispatch) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}

Как ни странно, FETCH_ALL_SUCCESS нетуволена.если я заменю return на dispatch, то это сработает.Почему он не работает, когда я отправляю его из обратного вызова API?Помощь бы очень понравилась!

Answer 1

Глядя на фрагмент, я предполагаю, что вы используете промежуточное программное обеспечение Redux-Thunk (вы забыли упомянуть, что, может быть?).В этом случае приведенный ниже подход является правильным.Здесь fetchData - это гром, а fetchSuccess - действие.

const fetchSuccess = (payload) => ({
  type: someActionTypes.FETCH_ALL_SUCCESS,
  payload
})

const fetchData = () => (dispatch) => {
  axios.get(url)
     .then(response => {
       console.log("RESPONDED", response, dispatch)
       dispatch(fetchSuccess(response))
     })
}

Answer 2

У вас есть эта проблема, потому что fetchSuccess функция определена неправильно.Если вы посмотрите поближе, то заметите, что вызов fetchSucess(payload) возвращает функцию стрелки :

(dispatch) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}

, в то время как dispatch принимает объект, поэтому функция fetchSuccess должна возвращать объект действия :

{
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
}

, поэтому функция fetchSuccess должна выглядеть примерно так:

const fetchSucess = (payload) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}