如何保持Redux存储中不会更改的状态?

holgip5t  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(213)

我正在构建一个将执行SSR(服务器端渲染)的单一应用程序,我正在使用React+Redux
我刚刚开始在这个应用程序中实现Redux。它是以前只使用React的useStateuseContext等构建的应用程序。
事实上,有时候我需要我的应用程序代码知道它运行的环境,例如ON_CLIENTON_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>
);

然后,在一些组件中,我可以这样做:

某个组件.js

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

我想用Redux改进这个模式。
我想把它保存在Redux商店中,这样我就可以摆脱EnvironmentContext,并使用以下命令访问它:

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

所以我想到了做:

索引.js

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

但由于我没有相应的reducer用于这一状态(environment),我得到了这个错误消息:

  • redux.js:319**在传递给createStore的preloadedState参数中找到意外的键“environment”。*应找到一个已知的reducer键:“auth”、“appVersion”、“siteData”。将忽略意外的键。

注意:authappVersionsiteData是我有相应的归约器的状态片段。
下面是我的rootReducer

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

问题

我能不能有一些不会改变的状态,因此不被任何reducer处理?或者在这种情况下,我确实需要设置一些虚拟reducer,只是为了总是返回相同的状态?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
有一些填充全局对象的建议,但我宁愿将其全部保留在ReactRedux中。

**PS:**抱歉问了这么长的问题,但我想让我的用例尽可能清楚,这样可能有人会有更好的模式。

mwecs4sa

mwecs4sa1#

Redux是为数据集中和管理而设计的,比如加载一些动态数据,在应用程序的生存期内对其进行更改等等。由于您不打算更改这些值,因为您的应用程序不能同时在两个环境中运行或在它们之间切换,这意味着您不需要在应用程序的生存期内更改它们,如果一些变量不应更改值,则应将其声明为CONSTANT。因此,无论何时需要访问它,都要将其声明为常量和重要变量。

相关问题