Как создать общее состояние между двумя компонентами реакции?

У меня есть 2 реагирующих компонента, которым необходимо разделить состояние, агент-ответчик показывает компонент A, который принимает некоторые входы и добавляет его в свое состояние после того, как состояние было успешно обновлено, я хочу перенаправить компонент B, где пользователь добавляет еще несколько входов и обновляет то же состояние, что и компонент A, для создания объекта с входами из A и B, прежде чем я отправлю запрос на отправку в api для сохранения данных как из компонентов A, так и из B. Как я могу это сделать, есть ли способ использовать response-router, или мне нужно настроить родительскую/дочернюю связь между компонентами?

ОТВЕТЫ

Ответ 1

Вы хотите реализовать некоторый объект, который хранит ваше состояние, которое может быть изменено с помощью функций обратного вызова. Затем вы можете передать эти функции вашим компонентам React.

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

function Store(initialState = {}) {
  this.state = initialState;
}
Store.prototype.mergeState = function(partialState) {
  Object.assign(this.state, partialState);
};

var myStore = new Store();

ReactDOM.render(
  <FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,
  firstElement
  );
ReactDOM.render(
  <SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,
  secondElement
  );

Теперь оба экземпляра FirstComponent и SecondComponent могут вызвать this.props.mergeState({ . . .}), чтобы назначить состояние одному и тому же хранилищу.

Я оставляю Store.prototype.getState как упражнение для читателя.

Обратите внимание, что вы всегда можете передать хранилище (myStore) самому компонентам; он просто чувствует себя меньше реагировать на это.

Вот еще несколько документов, которые могут представлять интерес:

React Docs: "Общение между компонентами"

Для связи между двумя компонентами, которые не имеют parent-child, вы можете настроить собственное глобальное событие система. Подписаться на события в компонентеDidMount(), отписаться в componentWillUnmount() и call setState(), когда вы получаете событие. Паттерн потока является одним из возможных способов его организации.

Ответ 2

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

Например, redux - отличный вариант, если вы планируете иметь центральный магазин. Однако возможны и другие подходы:

  • От ребенка к ребенку

    • Реквизит
    • Методы экземпляров

  • Ребенок для родителей

    • Функции обратного вызова
    • Событие Bubbling

  • Братство для братьев и сестер

    • Родительский компонент

  • Любое Любое

    • Шаблон наблюдателя
    • Глобальные переменные
    • Контекст

Подробнее подробная информация о каждом из подходов здесь

Ответ 3

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

Иначе, если вы хотите создать взаимодействие между двумя компонентами, которые не связаны ни с одним (родительский/дочерний), вы можете либо проверить flux или даже лучше redux.

Я бы сказал, что вы должны пойти с redux. Смотрите здесь, почему