Redux 和 React - 通过@connect 保持组件属性与状态同步

Question

我有一个使用 React 和 Redux 设置的应用程序，这样我就有一个围绕提供者的根应用程序组件（它正在向下传递商店，以便我的 child 组件可以访问状态和调度），例如所以：

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

我的 RootComponent 本质上使用 JSON 文件来呈现模板组件，这些组件通过密钥和标题（

<Application children={children} />

在其中一个 children 中，我使用 @connect 装饰器将应用程序的状态连接到组件，并且我在构建时触发调度程序以更新我的 'content' 道具像这样：

@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;
}

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

有没有人对我如何在不刷新的情况下使它工作有经验或建议？ @connect 真的是最好的选择还是有其他选择？

Answer 1

您需要在将您的商店传递给 Provider 之前对其进行补水，以向其提供初始状态，以便当您的应用程序 "boots" 您的商店已经拥有可用数据时。

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

类似于 window.__BOOTSTRAP__。

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

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

Redux 和 React - 通过@connect 保持组件属性与状态同步

Redux and React - Keeping component props in sync with state via @connect

javascript

reactjs

redux

react-redux