Можно ли выполнять бэкэнд-вызов с использованием редуктора в redux?

Я создаю угловой сайт. Обычно я выполняю внутренний вызов метода onInit и сохраняю данные в состоянии компонента. Теперь я хочу добавить на свой сайт redux. Должен ли я просто вызвать действие в методе onInit и выполнить фактический вызов backend в редукторе redux, или я должен сделать вызов backend в методе onInit моего компонента и позже добавить данные в состояние redux? Какой из них правильный? Я слышал, что редуктор redux должен быть чистыми функциями, так что делает ли backend-вызов функцию чистой?

Источник

2 ответа

Решение

Вы не должны выполнять внутренний вызов в редукторе. Документы Redux говорят:

Редуктор - это чистая функция, которая принимает предыдущее состояние и действие и возвращает следующее состояние.

А также:

Никаких побочных эффектов. Никаких вызовов API. Никаких мутаций. Просто расчет.

Побочные эффекты в Redux могут быть выполнены через redux-thunk, redux-saga или вызовы побочных эффектов в простом промежуточном программном обеспечении Redux.

Из этих вариантов проще всего начать с redux-thunk. Это позволяет вам выполнять асинхронные / побочные эффекты в действиях.

// store.js
import thunk from 'redux-thunk';
const myReduxStore = createStore(myRootReducer, applyMiddleware(thunk));

// actions.js
const myAction = (someArg) => {
  return dispatch => {
    myApiCall().then(result => {
      dispatch({ type: 'YAY_SUCCESS', result })
    })
  }
}

Затем, когда вы отправляете действие

dispatch(myAction())

Побочный эффект async произойдет после вызова диспетчеризации, но до того, как редуктор выполнит действие.

Источник

Да, вы не должны делать вызовы api в reducer, поскольку они должны быть чистыми и не иметь побочных эффектов.

Должен ли я сделать внутренний вызов метода onInit моего компонента и добавить данные в состояние редукции позже?

Я бы предложил использовать этот подход.

Источник
Другие вопросы по тегам