Best Practice: How I structure my React/ Redux projects

  • But when developing larger projects one have to think about a good structure of components and code artifacts.
  • When it comes to sharing components and (redux-)logic between several project a good composition is keen.
  • The initial project structure created by React Create App looks as follows: – – When you start introducing Redux you also need places for the typical redux artifacts: the store, reducers, epics and actions.
  • contains the reducers which may change the store’s state based on the actions of this component: { } ; { } ; ({ value , output Enter your name and press submit! })
  • For this reason my components always also include a set of actions, epics and reducers: – – includes a plain react component which is wrapped by within : – – These component redux structures may also be with multiple levels, just like the usual ones mentioned above.

When developing frontends I personally love to work with React and Redux due to its functional paradigms: You can easily develop, compose and test web components – Wondeful. But when developing larger projects one have to think about a good structure of components and code artifacts. When it comes to sharing components and (redux-)logic between several project a good composition is keen.

When developing frontends I personally love to work with React and Redux due to its functional paradigms: You can easily develop, compose and test web components – Wondeful. But when developing larger projects one have to think about a good structure of components and code artifacts. When it comes to sharing components and (redux-)logic between several project a good composition is keen.

In the following I want to give you insights how I started structuring my projects almost a year ago from now and I still stick to this structure as I made good experience with it throughout the last year.

A good starting point to develop a React project is Facebook’s React Create App it already gives you a good basic project structure and the most important tool integrations. If you don’t know it – Have look into the well written docs.

The initial project structure created by React Create App looks as follows:

When you start introducing Redux you also need places for the typical redux artifacts: the store, reducers, epics and actions. Thus I restructure the directories as follows:

The directory now contains a bunch of sub-directories:

Let’s have a more detailed look into the directory: The directory contains actions, reducers and epics for different functionalities. I always try to decouple functionalities as good as possible to…

Best Practice: How I structure my React/ Redux projects