I think re-ducks is the best design of React state management.
This project is an example of the history leading to re-ducks.
(Not completely the same as the official re-ducks. I arranged that a little.)
For comparison, Implement several patterns.
These are history of React state management design in 2019.
| Live demo | State management |
|---|---|
| 1. TodoApp (Old plain state) | React state (class component) |
| 2. TodoApp (Plain state) | React state (React Hooks) |
| 3. TodoApp (Old design redux) | Redux (Directly dispatch) |
| 4. TodoApp (re-ducks) | Redux (re-ducks) |
| 5. TodoApp (re-ducks + async) | Redux (re-ducks) + async |
| 5. TodoApp (re-ducks + async + hooks) | Redux (re-ducks) + async + hooks (Sounds good & Recommend) |
- ducks
- re-ducks
- Atomic Design
- Clean Architecture
- Presentational and Container Components - Dan Abramov - Medium
- The Case For Colocating Tests in React - Connor Elsea - Medium
| Package | Overview |
|---|---|
| __tests__/ | Shared code for UnitTest. Place product's UnitTest code as Colocating Tests. |
| assets/ | logo, svg etc. |
| components/ | React Components based on Atomic Design. And Presentation-Layer of Clean Architecture. |
| components/helpers/ | No Atomic Design, But React Component. (e.g. Routing component) |
| components/styles/ | Shared styles. |
| constants/ | Constants. (e.g. App settings, Messages) |
| data/ | Data-layer of Clean Architecture. |
| domain/ | Domain-layer of Clean Architecture. |
| store/ | Redux state. |
| types/ | Project specific types. |
| utils/ | General utils. |
| index.tsx | Entry point. |
| react-app-env.d.ts | Create-react-app auto generated file. |
| serviceWorker.ts | Create-react-app auto generated file for PWA. |
npm i
npm startIn the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Run ESLint with autofix & Type check.
If you want to NO autofix (= Dry run):
npm run lint-dryInstall missing TypeScript typings for dependencies.
If you want to install together, you can run:
npm i ${PACKAGE_NAME} && npm run typesync && npm iAnalyzing the bundle size.
Output to misc/source-map-explorer.html.
Outputs the configuration to be used for the file passed.
See ESLint --print-config
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.