---

re-ducks example

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.

Stack

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)

Inspired design patterns

• 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 structure

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.

Quick Start

npm i
npm start

Available DevTools

• Redux DevTools - Chrome Web Store

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run lint

Run ESLint with autofix & Type check.
If you want to NO autofix (= Dry run):

npm run lint-dry

npm run typesync

Install missing TypeScript typings for dependencies.

If you want to install together, you can run:

npm i ${PACKAGE_NAME} && npm run typesync && npm i

GENERATE_SOURCEMAP=true npm run analyze

Analyzing the bundle size.
Output to misc/source-map-explorer.html.

npm run eslint-print-config

Outputs the configuration to be used for the file passed.
See ESLint --print-config

npm run build

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.

Learn More

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.