Объедините два действия redux в цепочку и используйте обновленное состояние во втором

Я думаю, что застрял на простой проблеме, для которой у меня тоже может быть решение, но я не осведомлен о «качестве» своей идеи.

По сути, в моем состоянии у меня есть свойство массива, которое мне нужно обновить прямо перед отправкой другого действия.

Предположим, что мое состояние выглядит примерно так:

const state = {
    arrayProperty: []
}

У меня есть такое простое действие:

const ADD_VALUE = "ADD_VALUE"
const addValue = value => ({
    type: ADD_VALUE,
    value
})

В ответ на это действие в моем редукторе есть что-то вроде:

...
case ADD_VALUE:
    return update(state, { arrayProperty: { $push: [action.value] }})
...

У меня также есть действие, которое синхронизирует это состояние с сервером, примерно так (очевидно, я пропустил некоторые части):

const SAVE = "SAVE"
const save = model => dispatch =>
    API
      .save(model)
      .then(
          response => dispatch(saved(response))
      )

const SAVED = "SAVED"
const saved = response => ({
    type: SAVED,
    response
})

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

Я пробовал это (и это сработало), но я не уверен, что это правильный способ сделать это:

const addValueAndSave = value => (dispatch, getState) => {
    dispatch(addValue(value))
    dispatch(save(getState()))
}

В конце концов, мой вопрос ... это правильный способ сделать это?

Всем спасибо, ребята!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
225
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Насколько я знаю, вы все делаете правильно! С thunks к тому времени, когда вы захотите отправить свое действие save, вызов getState получит последнее состояние, которое именно то, что вы хотите. Теперь просто ради этого вы можете сделать все это одним действием, только асинхронным. Таким образом, вы можете делать оптимистичные обновления и возвращать их, если ваш вызов API не удался (если это желаемое поведение). Просто чтобы дать вам пример:

function addValue(value) {
  return (dispatch, getState) => {
    dispatch({
      type: ADD_VALUE,
      value,
    });

    API.save(getState()).catch(() => {
      alert('Something went wrong, try again later.');
      dispatch({
        type: REMOVE_VALUE,
        value,
      });
    });
  };
}

Или, в качестве альтернативы, вы даже можете создать промежуточное программное обеспечение, которое сделает это за вас для определенных действий, но это совершенно другое. Я надеюсь, что смогу дать вам некоторое представление о ваших вариантах, но в целом вы все делаете правильно;)

Другие вопросы по теме