时间戳

首页 > 解决方案 > 如何提供我的使用在客户端和服务器渲染上构建不同并且由和它的声音？

reactjs - 如何提供我的使用在客户端和服务器渲染上构建不同并且由和它的声音？

问题描述

我有一些数据只在我的index.tsx文件中定义，就在我渲染我的<App/>. 一旦定义了该数据，它就不再改变。我需要<App/>知道这些数据。

其他需求：

例如：

索引.tsx

const COUNTRY = getCountry(window.location);

ssrApp.tsx（在服务器上）

const COUNTRY = getCountry(req.hostname);

我的困境是我无法从文件中导出数据index.tsx，ssrApp.tsx因为它们是 2 个不同的文件，一个用于客户端，一个用于服务器渲染。我还需要将该数据提供给我的<App/>.

我想更简单的方法是通过上下文传递给应用程序。喜欢：

render(
  <SomeContext.Provider value={COUNTRY}>
    <App/>
  </SomeContext.Provider>
);

我开始这样做，它在大多数情况下都运行良好，但是当我开始在 thunk 中需要这些数据时它就坏了。AFAIK，thunk 无法访问上下文。但是他们可以访问状态（redux state）。

所以我创建了一个我称之为的 redux 状态，PRELOADED并将该数据作为preloaded状态值添加到存储中。

就像是：

configureStore({
    reducer: rootReducer,
    preloadedState: {
      PRELOADED: {
        COUNTRY: getCountry(window.location)
      }
    }
  });

它解决了“thunk 可访问”的问题，但也产生了其他问题。

因为@reduxjs/toolkit要求您初始化每个状态切片，即使您确定该状态将始终被预加载。

const PRELOADED_SLICE = createSlice({
  name: "PRELOADED",
  initialState: getInitialState(),
  reducers: {
    SOME_ACTION(state, action: SOME_ACTION) {
      // DO SOMETHING
    }
  }
});

所以你最终不得不创建一个“虚拟” initialState，因为真实状态只会在运行时定义。

无论如何，PRELOADED到目前为止，状态方法似乎已经完成了这项工作。这个问题有最佳实践吗？

标签： reactjsreduxstateserver-side-renderingredux-toolkit

解决方案

这是静态数据，对，所以为什么不将它包含在源文件中，如果它们都需要它，则将其导入到 index.tsc 和 ssrApp.tsx 中。

或者使用您的 PRELOADED 切片，为什么不首先使用您需要的数据填充 getInitialState() 并且在该切片中没有操作和 noop reducer？

我感觉你的描述I have some data that is only defined in my index.tsx file, right before I render my <App/>.实际上意味着静态数据以外的东西。

推荐阅读