Question

我使用React和Redux设置了一个应用程序，以便我有一个根应用程序组件（它正在传递存储，以便我的子组件可以访问状态和分派），如下所示：

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

我的RootComponent本质上使用JSON文件来呈现传递密钥和标题的模板组件（

<Application children={children} />

在其中一个孩子中，我使用@connect装饰器将应用程序的状态连接到组件，并且我在构建时解雇了一个调度员以更新我的内容＆＃ 39;道具如此：

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

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

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

Answer 1

你需要给你的商店加水，然后再将其传递给Provider，为它提供一个初始状态，这样当你的应用“启动”你的商店已经有了可用的数据。

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

window.__BOOTSTRAP__。

的某些内容

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

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

Redux和React - 通过@connect

1 个答案: