4

我正在构建一个将执行 SSR（服务器端渲染）的单一应用程序，并且我正在使用React + Redux。

我刚刚开始在这个应用程序中实现Redux 。它以前是仅使用 React 等构建的应用useState程序useContext。

事实是，有时我需要我的应用程序代码了解它正在运行的环境，ON_CLIENT或者ON_SERVER，例如，跳过某些window.something语句。

在Redux之前，我在做以下事情：

index.js（这可能是我的客户端包或服务器包的 index.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）的reducer，我得到了这个错误消息：

redux.js:319在传递给 createStore 的 preloadedState 参数中发现了意外的键“环境”。预计会找到已知的 reducer 键之一：“auth”、“appVersion”、“siteData”。意外的键将被忽略。

注意：auth和appVersion是siteData我有相应的减速器的状态。

这是我的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：很抱歉这个问题很长，但我想让我的用例尽可能清楚，所以有人可能会有更好的模式。

4

0 回答 0