The code is split into several chunks, and these chunks are only called when necessary (depending on the routing). The target of the POC is reached: we have a working application using React, React Router V4, Redux, and Saga. The complete code is available on master branch. LoadableState = await getLoadableState (appWithRouter ) // Dispatch a close event so sagas stop listening after they're resolved in const ) // Trigger sagas for component to run // It is built with the following dependencies: You will find on Github the code of this clean and fresh application, not yet including Redux and or asynchronous calls to recover data.

We started a new application with the same routing constraints as those encountered in the customer application. This post details the implementation of a Proof-of-Concept (POC) validating this architecture. However, we wanted to validate the viability of the new stack, including React Router v4 (RRV4), Redux Saga, Code splitting, and compatible with server side rendering (SSR). We already migrated a React application to React Router V4 in the past (see React Router v4 Unofficial Migration Guide. But as features add up, the code becomes harder and harder to maintain, and the routing more and more complex.ĭuring the summer, the Product Owner agreed to prioritize two technical tasks: 'Migrate to React Router 4' and 'Improve Performance With Code Splitting'. Out stack includes React Router V3, Redux, and Redux-Saga. We are currently migrating a customer project from a Symfony application to a React application with server-side rendering.

React router dom v4 context