В Реагировании с Redux, когда я должен сохранять данные на задний конец

Question

В React with Redux, когда есть некоторые пользовательские операции, например, в facebook, пользователь добавляет некоторые комментарии, я назову dispatch(), чтобы отправить действие добавления в магазин redux , но когда я должен позвонить API конца, чтобы сохранить эти данные в базе данных? мне нужно сделать это вместе с dispatch()?

благодаря

Answer 1

Одним из решений было бы передать логику API в стуком с использованием промежуточного программного пакета, такие redux-thunk (или аналогичный).

Использование thunks позволяет обрабатывать специальные виды actions как функции, что означает, что вы можете распространять простое действие с помощью конкретной логики, связанной с действием. Пример, который вы даете, чтобы сериализовать свое состояние, является прекрасным вариантом использования для decux-thunk.

Следует отметить, что, в отличие от редукторов, thunks явно поддерживают выборку состояния и отправляют последующие действия через функции getState и dispatch.

Ниже приведен пример ES6 того, как может выглядеть такой многоцелевой удар.

Для демонстрации метода getState() новый элемент будет сохранен только через api, только если состояние редукции shouldSave является правдивым.

Я бы также использовал синтаксис async/await, чтобы убедиться, что вызов api завершен до диспетчеризация локального действия redux.

Thunk Пример - добавление нового элемента

import api from './api' 

export const addNew = async (item) => { 
    return (dispatch, getState) => { 
    try{ 
     const state = getState() 
     if(state.shouldSave){ 
     await api.save(item) 
     } 
     dispatch({ 
     type: ITEM_ADD_NEW, 
     data: item 
     }) 
    }catch(err){ 
     const error = new Error("There was a problem adding the new item") 
     error.inner=err 
     throw(error) 
    } 
    } 
}