Redux 和 React - 通过 @connect 使组件道具与状态保持同步

Question

我有一个使用 React 和 Redux 设置的应用程序，这样我就有一个根应用程序组件包裹在一个提供者周围（它向下传递存储，以便我的子组件可以访问状态和调度），如下所示：

<Provider store={Store}>
    <RootComponent />
</Provider>

My RootComponent 本质上使用 JSON 文件来呈现模板组件，这些组件通过键和标题 (

<Application children={children} />

在其中一个孩子中，我使用 @connect 装饰器将应用程序的状态连接到组件，并且在构造时触发调度程序以更新我的“内容”道具，如下所示：

@connect(state => ({content: state.content}))
export default class DynamicText extends Component {

constructor(props) {
    super(props);
    var Content = require(`./jsonContent`);
    props.dispatch(loadContent(Content[props.title].elements));
}

**actions.js**
export function loadContent(content) {
    return {
        type: 'LOAD_CONTENT',
        content
    };
}

**reducers.js**
const initialState = {
route: null
};

export default function routeReducer(state = initialState, action) {
    switch (action.type) {
        case LOAD_CONTENT:
            return Object.assign({}, state, {
                content: action.content
            });
        default:
            return state;
}

我遇到的问题是，在启动我的应用程序时，“内容”属性未定义 - 但是在页面刷新时，它会填充来自 JSON 文件的更新后的“内容”数据。我认为这个问题可能会发生，因为最初在我的 @connect 装饰器中引用的 state.content 是未定义的，但是我希望构造函数上的立即调度能够解决这个问题。

有没有人有关于如何在不刷新的情况下让它工作的经验或建议？ @connect 真的是这里的最佳选择还是有其他选择？

Answer 1

在将商店传递给 Provider 之前，您需要为它提供一个初始状态，以便当您的应用“启动”时，您的商店已经拥有可用的数据。

使用connect 是正确的方法。 如果您正在运行服务器端呈现的应用程序，您可以在第一次请求时将您的 json 内容放在附加到 window 的属性中，然后在存储水合后将其清空。

类似于window.__BOOTSTRAP__。

store = createStore(appReducers, { content: yourJsonFileContents });

<Provider store={store}>
    <RootComponent />
</Provider>