Перезагрузить редукс при сохранении

Question

Я работаю над проектом React. JS, основанным на шаблонах react-boilerplate. К сожалению, react-boilerplate имеет только пример загрузки удаленных данных в Redx. Нет примера сохранения.

Мне удалось написать save действий, редуктора и саги, никаких проблем. Это все довольно стандартные вещи. Однако одна проблема удерживала меня, но я не смог ее решить - перезагрузить магазин после сохранения.

Я сделал следующее:

const mapDispatchToProps = dispatch => {
  return {
    loadEvent: eventId => dispatch(loadEvent(eventId)),
    saveEvent: values => {
      const event = dispatch(saveEvent(values))
      return dispatch(loadEvent(event.id || values.id))
    }
  }
}

Я хочу, чтобы приведенный выше код работал как Обещание - перезагрузить событие по идентификатору после того, как сохранение завершено до завершения.

Это не работает так, как мне нужно. Я получил нагрузку, но в магазине нет новых данных.

Answer 1

Я решил эту проблему, прикрепив все в моей саге, как показано ниже:

try {
  // Call our request helper (see 'utils/request')
  const createdEvent = yield call(request, requestURL, {
    method: !isNaN(id) && id !== undefined && id !== null ? 'PUT' : 'POST',
    body: JSON.stringify(event)
  })
  yield put(eventLoaded(createdEvent, id))
  yield put(loadEvent(createdEvent['id']))
} catch (err) {
  yield put(eventLoadingError(err))
}

Теперь все работает так, как мне нужно.

Answer 2

Вы должны создать некоторые xxxx_REQUEST и xxxx_SUCCESS|FAILURE действие types для каждого запроса (не важно, сохраняет он или нет). Я не знаю, что вы - redux-saga или redux-thunk, но после завершения получения запроса вы должны отправить xxxx_SUCCESS|FAILURE, затем в свой редуктор, получить данные и сохранить их в своем хранилище.

Тогда вы можете используйте селектор, чтобы получить данные из избыточного хранилища в вашем компоненте.