React-Hooks-State-Management-Alternatives...

A classic React TypeScript Todo App with alternative state management side by side.

Demo

Purpose:

For education and demonstrations to easily show alternative solutions for managing states, from component prop drilldown to global stores.

Note:

This is a demo with several state solutions in the same App, which means that structures are not optimal in all parts, duplicated code and deviations from common patterns exists.

Alternatives:

• Basic: React State and Effect with classic component "Prop Drilling".
• Context: React Context and Reducer to pass data and actions through the components.
• Redux: Store, Actions and Reducers to pass data and actions through components.
• Redux Toolkit: Store and Slices to pass data and actions through - with immer components.
  • Pullstate: Ridiculously simple state stores with performant retrieval anywhere in your React tree using React hooks. data and actions through components.
• MobX State management: React Context as Store for MobX-state-Tree Models and Actions to pass data and actions through components.

Commands

The App is based on create-react-app

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

npm test or yarn test

Runs Jest Tests