Каковы ваши лучшие рекомендации по предварительной загрузке initialState в ваших приложениях Redux?

В настоящее время я не доволен хаками, с которыми я столкнулся, используя Flux, и теперь Redux для заполнения initialState в моем магазине.

Я всегда отправляю полезную нагрузку JSON вниз с начальной загрузкой страницы. Универсальный JavaScript не является вариантом в некоторых моих приложениях, поскольку они не все подкреплены Node. Я хотел бы сосредоточиться на "лучших практиках" и шаблонах вокруг того, как данные предварительно загружаются на клиенте. Затем я чувствую, что переход на сервер тривиален.

Вот суть того, что я сейчас делаю на работе и в нескольких других игрушечных приложениях с помощью Redux:

https://gist.github.com/kevinold/5767bb334472b7e2bfe3

Подводя итог:

Передача глобальных переменных вниз со страницей
В componentDidMount() Я отправляю действия, которые "получают" и обрабатывают различные фрагменты данных. (Эти методы "получать" используются при обработке этих битов данных, когда они извлекаются асинхронно через действие запроса, и Im перепрофилирует их здесь, поскольку у меня уже есть данные.)

Это работает, и есть какие-то проблемы, которые возникали, но это похоже на взлом. Я не очень доволен. Кроме того, я чувствую, что начальное состояние Redux не доволен тем, что я это делаю.

Согласно http://rackt.org/redux/docs/recipes/ServerRendering.html и разделу "Клиентская сторона", я могу передать initialState в мой магазин.

У меня есть патч, который у меня есть для другого проекта, с которым я помогаю (KeystoneJS). Я передаю объект Keystone в initialState:

https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-cd8e9933209e834b0519a0257bcfa914R8

В то время как это работает, как вы можете видеть, Im вынужден соответствовать форме вывода моих общих комбинированных Reducers (https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d), или я получу консоль предупреждения и т.д.

Я мог бы очень лениться в этом, но пытаюсь ограничить необходимость обновлять другую часть данных, когда я добавляю/изменяю что-либо, связанное с редукторами (добавьте редуктор, как они составлены и т.д.).

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

В настоящее время я перевариваю, как (https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L25) обрабатывает его initialState.

ИД действительно ценят некоторые отзывы о "лучших" и "реальных мирах", которые работают для других.

Ответ 1

Я не полностью понимаю вопрос, но я стараюсь ответить.

В componentDidMount() Я отправляю действия, которые "получают" и обрабатывают различные фрагменты данных. (Эти методы "получать" используются при обработке этих битов данных, когда они извлекаются асинхронно через действие запроса, а Im перепрофилирует их здесь, так как у меня уже есть данные.)

Это плохое место для отправки. Если вы решите отправить действия вместо первоначального состояния prodiving напрямую, сделайте это перед рендерингом. Другими словами, сделайте это сразу после создания магазина! Таким образом, вы не создадите начальное состояние пустым.

В то время как это работает, как вы можете видеть, Im принудительно соответствует форме вывода моих общих комбинированных Reducers (https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d), или я получу консоль предупреждения и т.д.

Вы не должны создавать объект initialState вручную. Вы должны создать хранилище Redux на сервере, dispatch действия там, чтобы предварительно заполнить его данными, а когда он готов, вызовите store.getState(), чтобы получить состояние, которое вы хотите передать клиенту. На клиенте вы читаете его из глобальной переменной и создаете экземпляр хранилища клиентов. Другими словами, вам никогда не придется вручную создавать initialState -youre, которые предполагается захватить на сервере с помощью store.getState(), передать его клиенту и создать с ним хранилище.

Поэтому я не понимаю проблему, которую вы описываете. Если имена редуктора или вложенные изменения будут изменены, он также изменится на сервере. Вам нечего делать, чтобы "исправить" - если вы используете Redux как на клиенте, так и на сервере, их структура состояния будет соответствовать.

ИД действительно ценят некоторые отзывы о "лучших" и "реальных мирах", которые работают для других.

Если вы используете Redux на сервере, предварительно заполните хранилище, как описано выше, и передайте его состояние клиенту. В этом случае вам нужно использовать аргумент initialState createStore().
Если вы по какой-то причине не используете Redux на сервере, но вы все равно хотите заполнить данные (например, возможно, вы используете что-то, кроме Node), подход с диспетчерскими действиями - ваш следующий лучший выбор потому что он не требует, чтобы ваш бэкэнд знал форму состояния. В этом случае вы должны передать эти действия как JSON клиенту, а dispatch() все сразу после создания магазина.