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

Question

I have an application set up using React and Redux such that I have a root application component wrapped around a provider (which is passing the store down so that my child components can access state and dispatch) like so:

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

My RootComponent essentially uses a JSON file to render Template components that get passed a key and title (

<Application children={children} />

Within one of the children, I've hooked up the state of the application to the Component using the @connect decorator and I'm firing off a dispatcher upon construction to update my 'content' prop like so:

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

The issue I'm having is that when booting up my application, the 'content' prop is undefined - upon page refresh however, it populates with the updated 'content' data from the JSON file. I think the issue may be occurring because initially the state.content referenced in my @connect decorator is undefined, however I was hoping that the immediate dispatch on the constructor would solve this issue.

Does anyone have experience or recommendations on how I can get this working without a refresh? Is @connect really the best option here or are there alternatives?

Answer 1

You need to hydrate your store before passing it down to Provider providing an initial state to it so that when your app "boots" your store already has the data available.

Using connect is the right way to go after that. If you're running a server side rendered application you can put your json contents in a property attached to window on first request then empty it after store has been hydrated.

Something along the lines of window.__BOOTSTRAP__ .

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

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