/react-redux-patterns

Putting altogether learnt approaches to better organize a redux react application

Primary LanguageJavaScript

And what is this?

Just a simple code-notebook to write learnings and observations about how to use React and Redux in a project. Good practices or things I liked from my own experience or trustable sources. I started writing this repo with a question in mind: “How would I explain to a future team how in my experience would be a good way to organize a React-Redux application? How could we keep boilerplate to the minimum, and avoid that a growing application ends becoming a laberinth?”

At this point it is just intended for reading. Do not try to build or run.

EVENTUALLY THIS WILL BECOME A NEW REPOSITORY ORGANIZED AS DOCUMENTATION-BOOK.

Content

  1. A basic organization of the root level application: redux|components|stories|app-ui
    1. In the real life I'd prefer keep components & stories for them in a separate repository
  2. Creating the Redux Store
    1. Starting with a default state
  3. Reducer entry point
    1. A specific reducer: Experience
    2. The second reducer: Profile
  4. Action module I
  5. Action module II
  6. The app ui layer entry point (WIP)
    1. Example of a connected component (WIP)
  7. Simple presentational component (WIP)
    1. Keeping component tests co-located
  8. React Patterns:
    1. Classic Compound Components
    2. Modern Compound Components
    3. Controlled / Uncontrolled
    4. High Order Components
    5. Primitive Components
    6. Props Collections
    7. Provider Pattern
    8. Render Props
      1. A functional render props
    9. Simple Composition
    10. State Initializer
    11. Patterns summary notes