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

Question

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

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

我的RootComponent本质上使用JSON文件来呈现通过键和标题传递的Template组件（

<Application children={children} />

在其中一个孩子中，我使用@connect装饰器将应用程序的状态连接到Component，并在构造时解雇了一个调度程序以更新我的“ 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;
}

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

有没有人有经验或关于我如何能不费吹灰之力地提出建议？ @connect真的是这里最好的选择吗？还是有其他选择？

Answer 1

您需要先对商店进行充水，然后再将其传递给提供初始状态的Provider ，以便在应用程序“启动”时商店已经具有可用的数据。

使用connect是正确的方法。 如果您正在运行服务器端渲染的应用程序，则可以在第一次请求时将json内容放入附在window上的属性中，然后在商店充水后将其清空。

沿着window.__BOOTSTRAP__的线条window.__BOOTSTRAP__ 。

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

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