Как я могу сохранить состояние, которое не изменится внутри магазина Redux? - PullRequest
Новая
       36

Как я могу сохранить состояние, которое не изменится внутри магазина Redux?

4 голосов
/ 20 марта 2020

Я создаю одно приложение, которое будет выполнять SSR (рендеринг на стороне сервера), и я использую React + Redux .

Я только что начал реализовывать Redux в этом приложении. Ранее это было приложение, использующее только React useState, useContext et c.

Дело в том, что иногда мне нужно, чтобы код моего приложения знал о среде, в которой он работает, либо ON_CLIENT или ON_SERVER, например, чтобы пропустить какой-то оператор window.something.

До Redux я делал следующее:

index. js (это может быть индекс. js моего клиентского пакета или моего сервера) 

ReactDOM.render(
  <App
    ON_SERVER={false}               // THIS IS TRUE ON SERVER CODE
    ON_CLIENT={true}                // THIS IS TRUE ON CLIENT CODE
    ... other stuff
  />
,document.getElementById('root')
);

Приложение. js

...
const environment = {
  ON_SERVER: props.ON_SERVER,
  ON_CLIENT: props.ON_CLIENT
}

...

// PROVIDING IT USING REACT CONTEXT

return (
  <EnvironmentContext.Provider value={environment}>
    <MyComponents/>
  </EnvironmentContext.Provider>
);

И затем, внутри некоторого компонента, я могу сделать этот шаблон:

SomeComponent. js

const {ON_CLIENT} = useContext(EnvironmentContext);
ON_CLIENT && window.something;

И я хочу улучшить этот шаблон с помощью Redux .

Я хочу сохранить это в магазине Redux, чтобы я мог избавиться от EnvironmentContext и получить к нему доступ с помощью: 

const {ON_CLIENT} = useSelector((state) => state.environment);

Так что я мы думали сделать:

index. js

const store = createStore(rootReducer, {
  environment: {
    ON_CLIENT: true,               // THIS IS TRUE ON CLIENT CODE
    ON_SERVER: false               // THIS IS TRUE ON SERVER CODE
  }
});

Но так как у меня нет соответствующего редуктора для этой части состояния (environment ) Я получил сообщение об ошибке:

ред. x. js: 319 В аргументе preloadedState передан неожиданный ключ "environment", переданный в createStore. Вместо этого ожидается поиск одного из известных ключей редуктора: "auth", "appVersion", "siteData". Неожиданные ключи будут игнорироваться.

ПРИМЕЧАНИЕ: auth, appVersion и siteData являются частями состояния, для которых у меня есть соответствующие редукторы.

Вот my rootReducer: 

const rootReducer = combineReducers({
  auth: updateAuth,
  appVersion: updateClientVersion,
  siteData: updateSiteData
});

ВОПРОС

Могу ли я иметь некоторую часть состояния, которая не изменится и, следовательно, не будет обработана каким-либо редуктором? Или в этом случае мне нужно установить какой-нибудь фиктивный редуктор, чтобы всегда возвращать одно и то же состояние? PS: Это делает трюк, но кажется, что это неправильно. 

// NOTE: I will always preload this state, in the `createStore` call, so the state will never be undefined.

function returnEnvironment(state={}, action) {
  return state;
}

const rootReducer = combineReducers({
  auth: updateAuth,
  appVersion: updateClientVersion,
  siteData: updateSiteData,
  environment: returnEnvironment
});

У кого-нибудь есть лучшая альтернатива этому?

Я смотрел на это обсуждение: https://github.com/reduxjs/redux/issues/1457

Есть несколько предложений по заполнению глобального объекта, но я бы предпочел оставить все это внутри React и Redux.

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

...