Состояние Redux вне магазина Redux - PullRequest
Новая
       6

Состояние Redux вне магазина Redux

0 голосов
/ 19 февраля 2019

У меня есть ситуация, когда в моем приложении-реактиве есть несколько изображений, которые я хочу показать, 

export const myImages = Map()
  .set('image-one, {
    name: 'Foo',
    source: require('./foo'),
  })
  .set('image-two, {
    name: 'Bar',
    source: require('./bar'),
  })

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

export const selectImageSaga = function*({ imageId }) {
  yield put({ type: 'SELECT_IMAGE', imageId /* image-one, image-two, etc. */})

Теперь в моем магазине есть ссылка на изображение, которое я хочу показать.Я мог бы позвонить myImages.get(reduxState.imageId), чтобы получить данные, которые я хочу, все хорошо и здорово.Я действительно ненавижу это.

Теперь и моя сага, и мои компоненты реагирования должны ссылаться на внешний и (возможно, я не показываю это в этом примере) изменяемый объект, чтобы извлекать данные, которые им нужны, когда они нуждаютсяэто.

Если бы не было source, я бы просто сохранил путь или URI интересующего меня файла, и все, я бы сохранил все свое состояние в избыточном.

Какие у меня есть альтернативы?

1 Ответ

0 голосов
/ 19 февраля 2019

Здесь нет магии, я вижу 3 основных направления действий:

  1. Ваше действие передает всю необходимую информацию.Это можно сделать, перенеся ответственность на вызывающего действия, или сам создатель действия извлечет данные из внешнего потенциально изменяемого объекта, нормализует их и передаст их редуктору.
  2. Ваш редуктор получаетидентификатор из действия и объединяет его с внешним объектом.Опять же, это означает, что в хранилище редуктов есть вся необходимая информация.
  3. Ваш селектор (или, если у вас нет селекторов, ваш компонент реагирования) принимает идентификатор и объединяет его с вашим внешним объектом.Это хорошо работает, если вы выполняете такие вещи, как сохранение вашего магазина в localStorage (потому что тогда вы сохраняете только идентификатор, а не всю информацию)

Преимущество 1 состоит в том, что ваш редуктор глуп и не сохраняет состояния,логика извлечения соответствующей информации выполняется в создателе действия.

Преимущество 2 состоит в том, что ... ну, честно говоря, я не могу думать о слишком многих, дайте мне знать, если вы найдете такую ​​информацию.

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

Здесь нет серебряной пули, боюсь, вам нужно будет принять решение, основываясь на потребностях и соглашениях вашего проекта.

...