使用 redux 和 react 的异步服务器端渲染

Question

I am having serious difficulty getting a working server-side rendering solution using React , Redux , Redux-Thunk and React-Router .

At the moment, my solution works on the client-side following the basic guidelines and this post: https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react . For the scope of simplicity, I will be using the code from that blog as my example. The only alteration is that I have added a console.log("X"); to the reducer function items so that I know when it is called. The resultant function is:

export function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            console.log('X');
            return action.items;

        default:
            return state;
    }
}

and I also set the itemsFetchData function to return the promise, becoming:

export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        return fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

As I need server-side rendering. I setup Express to consume my middleware handleRender which in turn calls renderFullPage that returns the HTML string. The Express implementation can be assumed correct. My handleRender looks like the below

export function handleRender(req, res) {
  // Create a new Redux store instance
  const store = configureStore();

  const { dispatch } = store;

  dispatch(itemsFetchData(''http://5826ed963900d612000138bd.mockapi.io/items'')).then(() => {
    console.log("Y");
    // Render the component to a string
    const html = renderToString(
      <Provider store={store}>
        <div id="app">
          <StaticRouter context={{}} location={req.url}>
            <Main />
          </StaticRouter>
        </div>
      </Provider>
    );

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(html, preloadedState));
  });
}

Using the above code, Y is printed to the console, but X is never printed, meaning the reducer function is not being called. If I remove the then from the promise in my handleRender, thus becoming:

dispatch(itemsFetchData(''http://5826ed963900d612000138bd.mockapi.io/items''));
console.log("Y");
// ... remaining code remains unaltered

The reducer function is being called correctly and the Redux store updated correctly, however since this is asynchronous the handleRender would have returned the HTML already.

Any help would be greatly appreciated. It's been a long day.

Answer 1

The source of the confusion was caused because the reducer was injected after the itemsFetchData was called. The problem was only noted when using then because without it, the component Main which injected the reducer was still included and everything seemed normal. When it was relying on the then I ended up with the then unable to dispatch because there was no reducer and the Main component not included because it was waiting for the dispatch.

To solve the problem, I have included the reducer in my combineReducers .

Like I said, it was a long day.