Skip to content

Solution inspired by Redux for handling state management effectively within complex React components

Notifications You must be signed in to change notification settings

lanceturbes/react-component-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Component Store

  • Inside src/lib.ts lies the library code.
  • Inside src/app.ts lies an example application.

Basic Usage

  • Use React in your application (you can use the vanilla Store class if you don't use React, but there's way better stuff out there)
  • Create a type definition for your state and actions (see example in src/app.ts)
  • Create an anonymous class, extending from ComponentStoreHelper. Pass the state/action types to the generic slots.
  • Use your editor's "quick fix" code completion to auto-fill necessary overrides
  • Return default state from provideDefaultState, setup reducer method (produceNextState) to transition between states given actions
  • Wrap your React components with the <Provider /> function component inside the object you've just made.
  • Use useSelector and useDispatch within children of the wrapper to subscribe to state changes in the store
  • Now, you're free to hoist state and only re-render exactly what you need. Just keep state as close to where you need it as possible, writing UI in a straightforward way with minimal/no prop-drilling required.

About

Solution inspired by Redux for handling state management effectively within complex React components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published