Загрузка статических констант в React+Redux

Я использую рендеринг на стороне сервера для своего приложения React-Redux. И я хочу, чтобы при запуске приложения загружались некоторые константы, например список городов с соответствующими идентификаторами:

[ 
  {
      name: "London",
      id: 1
  }
  ...
]

Я думаю, что лучше поместить эти данные в store на стороне сервера и предоставить их клиенту с помощью window.__INITIAL_STATE__, как предлагается здесь http://redux.js.org/docs/recipes/ServerRendering.html

Эти константы будут доступны только для чтения, и я хочу предварительно загрузить их только для целей нормализации данных. Например, позже я могу просто получить список пользователей с идентификаторами городов вместо пользователей с названиями городов: {name: "Alex", cities: [1,2]}

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

В аргументе preloadedState, переданном в createStore, обнаружен неожиданный ключ «города». Ожидается, что вместо этого будет найден один из известных ключей редуктора: «цвета». Неожиданные ключи будут игнорироваться.

Поэтому я ищу какой-нибудь элегантный способ справиться с этой ситуацией.

На данный момент у меня есть 2 идеи, как с этим справиться:

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

    export const cities = (state = [], action={ type: null }) => {
    return state
}

  2. Отправлять с сервера начальные действия с полезными данными и выполнять их на клиенте при запуске:

    // server.js
window.INITIAL_ACTIONS = [
  { type: "REQUEST_LOGIN_SUCCESS", user: {userId, userName, userEmail, etc} },
  { type: "REQUEST_CITIES_SUCCESS", [..listOfCities] },
]

И в моем client-index.js отправьте эти действия сразу после создания магазина:

//client-index.js
window.INITIAL_ACTIONS.forEach(store.dispatch)

Итак, хорош ли один из моих подходов? Или, может быть, вы знаете какое-то другое, более элегантное решение?

Спасибо.


reactjs redux server-side-rendering
person MyTitle    schedule 21.07.2017    source источник
comment
Почему константы приложения вообще должны быть в хранилище? Просто держите их на объекте окна.   -  person Danny Delott    schedule 21.07.2017
comment
@DannyDelott, это действительно сильно вонючий, нет, нет.   -  person Gregg    schedule 21.07.2017
comment
Почему это? В универсальном приложении реагирования все состояние сводится к объекту окна.   -  person Danny Delott    schedule 21.07.2017

Ответы (1)


arrow_upward
3
arrow_downward

Мы делаем что-то подобное с фиктивным редьюсером «настроек». то есть

const rootReducer = combineReducers({
  ...
  settings: (state = {}) => state,
  ...
});

Это дает нам удобное место для хранения всей конфигурации нашего приложения.

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

window.__INITIAL_STATE__ = {
  ...
  settings: { ... },
  ...
};

Некоторые могут возражать против такой практики, но я думаю, что это разумно. Хотя settings может быть константой, тем не менее, это состояние. Это соответствует практике редукции объекта с одним состоянием. (Кроме того, в будущем может наступить момент, когда срез состояния настроек будет динамическим и потребует «настоящего» редуктора.)

person David L. Walsh    schedule 21.07.2017