React Redux: как делиться данными между редукторами?

Question

У меня есть основной список задач.Поле ввода todo для списка todo имеет событие onChange, которое запускает действие и отправляет event.target.value редуктору и сохраняет каждый символ, который пользователь вводит, в свойство объекта store.

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

Как получить данные, которые были ранее введены изсохранить и вставить в другой редуктор?

Во всех примерах, которые я видел, редукторы начинаются с «начального состояния».Я не хочу этого, я хочу предыдущее состояние, в которое вошел пользователь.

Ниже приведена версия кода CodeSandbox (по какой-то причине оранжево-бежевая вкладка справа должна быть переключена влевона синий для отображения формы. Если вы этого не сделаете, это не сработает).

https://codesandbox.io/s/pwqlmp357j

Answer 1

Спросите себя, правильно ли вы структурировали свои редукторы.Если a и b не являются независимыми друг от друга, почему они являются отдельными редукторами?

Хорошо, если мы говорим о правильном построении редуктора, cachedInput и todoList должны жить в одном редукторе.Нет необходимости создавать еще один редуктор.Также я предполагаю, что вам нужно сразу получить входное значение (когда пользователь нажимает на кнопку отправки) и отправить его в хранилище.

Если вы все еще хотите создать отдельные редукторы, то вы можете следовать приведенному ниже подходу:

Ответ на Как получить доступ или поделиться данными, уже находящимися в хранилище, внутри редукторов?

Не использовать combReducers.

Пример

заменить этот код

export const a = combineReducers({
  cachInput,
  newTodo
});

с

export default (state = {}, action) => {
  return {
    cachInput: cachInput(state.app, action, state),
    newTodo: newTodo(state.posts, action, state),
  };
};

редуктор будет выглядеть как

const reducer = (state = initialState, action, root) => {....}

, и вы можете получить доступ к предыдущему состоянию с root

Answer 2

Событие onChange, которое запускает действие и отправляет event.target.value редуктору и сохраняет каждый символ, который пользователь вводит, в свойство объекта хранилища

Практически это не такправильный способ использования redux->action->reducers->store, учитывая, что вы отправляете форму для отправки тех же данных редукторам.

Это приведет к ненужному отображению компонента, связанного с redux#connect, если выне обработали shouldComponentUpdate /componetWillRecieve/getDerivedStateFromProps красиво

Вместо этого сохраните каждый введенный вами символ / строку внутри компонента state и после того, как пользователь отправит его, dispatch action дляпередать строку / символы в reducer's.

Answer 3

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

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

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

Answer 4

Вы используете два разных состояния (или скажем initialState) для каждого редуктора.Следовательно, обновление в одном объекте не отражается на другом.

Вам необходимо использовать общий initialState для обоих редукторов, и ваша проблема решена.

Вы можете сохранить initialState в другом файле иВы можете импортировать оба редуктора.

Рассмотрим пример кода ниже:

1.InitialState.js

export default initialState = {
  todoList: [
    { text: "fake todo" },
    { text: "fake todo" },
    { text: "fake todo" }
  ],
  cachedInput: ""
};

2. Теперь в CachDataOfTodoInput.js

import initialState from "InitialState";

export function cachInput(state = initialState, action)

3.Так же в SubmitDataToTodo.js

import initialState from "InitialState";
export function submitNewTodo(state = initialState, action)

Следовательно, intialState совместно используется вашими редукторами, и вы сможете получить доступ к данным в каждом редукторе.