Reactjs 如何提供我的<；App/>；在客户端和服务器上以不同方式构建的数据呈现<；App/>；还有它的砰砰声？

在渲染

之前，我有一些只在

index.tsx

文件中定义的数据。一旦定义了该数据，它就不再改变。我需要我的

来了解这些数据

其他需要：

• 有时组件内部需要该数据（即：可通过上下文和状态访问）
• 有时，redux thunk中需要该数据（即：只能通过状态或传递给thunk的参数访问）

例如：

index.tsx

const COUNTRY = getCountry(window.location);

ssrApp.tsx（在服务器上）

我的难题是我无法从

index.tsx

或

ssrApp.tsx

文件导出数据，因为它们是两个不同的文件，一个用于客户端，一个用于服务器渲染。我还需要将该数据提供给我的

我想更简单的方法是通过上下文传递到应用程序。比如：

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

它解决了“可访问thunks”的问题，但也带来了其他问题

因为

@reduxjs/toolkit

要求您初始化每个状态片，即使您确定该状态将始终预加载

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

因此，您最终必须创建一个“虚拟”

initialState

，因为实际状态只在运行时定义

---

无论如何，到目前为止，

预加载的

状态方法似乎可以完成这项工作。有解决这个问题的最佳实践吗？

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

或者，使用预加载的切片，为什么不首先用所需的数据填充getInitialState（），并且在该切片中没有操作和noop缩减器

---

我感觉您的描述

我有一些数据只在我渲染我的文件之前在index.tsx文件中定义。

实际上是指静态数据以外的内容。

它不完全是静态数据。从

的角度来看，它是静态的，但从入口点

index.tsx

的角度来看，它是动态的。就像

window.location

和

req.url

示例一样。您可以从

窗口.location

获取

主机名，因为它是在客户端上呈现的。另一个是使用服务器上的
req
对象。我无法填充
getInitialState（）
，因为这是在
createSlice（）
调用中完成的，并且它无法访问
index.tsx
或
ssrApp.tsx
文件。我只能使用
configureStore（）
调用的
preload
进行预填充，该调用在客户端/服务器上都完成。为什么这不仅仅是一个React prop？可能是。但是很难将道具降低10级。所以我可以使用上下文。但是
thunks
无法访问上下文数据，有时他们需要它。这就是为什么我把它搬到了Redux州。我也可以将该数据作为参数传递给
thunk
。是的，假设thunk是在UI组件的上下文中调用的，那么它就可以“访问”上下文数据。我应该特别提到上下文作为一种替代，而不仅仅是说props，我的意思是“这不只是普通的将数据绑定到UI吗？”它实际上是从UI组件调用的。但是你的意思是让thunk从调用中获取数据作为参数，对吗？
configureStore({
    reducer: rootReducer,
    preloadedState: {
      PRELOADED: {
        COUNTRY: getCountry(window.location)
      }
    }
  });

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