- Notifications
You must be signed in to change notification settings - Fork16
🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. 🍋
License
tnfe/clean-state
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🐻 Clean-State is a neat, compact state management tool. It drops all of React's historical baggage, uses native hooks to implement it, and gets rid of Redux's problem of invalid rendering during status updates. At the architectural level it is automatically organized through a very simple API. 🍋 If you're not building an aircraft carrier and you're tired of having a large, complex and unwield-of-use State management library, try clean-state. It is small and exquisite, the performance of the extreme can meet your needs.
- Using native hooks implementation, zero external dependencies.
- The structure is simple, the module layer granularity is fine and measurable, and the division is clear.
- Excellent performance, can do module level accurate update.
- Native support side effects.
- It's extremely small, just 200 lines of code.
- Just React syntax, zero learning access cost.
- TypeScript friendly and automatically deduces module types.
- Support for Redux - Tool debugging tool.
- Perfect support for RN.
npmiclean-state--save
// modules/user.tsconststate={name:'test'}constuser={ state,reducers:{setName({payload, state}){return{...state, ...payload}}},effects:{asyncfetchNameAndSet({dispatch}){constname=awaitPromise.resolve('fetch_name')dispatch.user.setName({name})}}}exportdefaultuser;
// modules/index.tsimportuserfrom'./user'importbootstrapfrom'clean-state'constmodules={ user}exportconst{useModule, dispatch}=bootstrap(modules);
// page.tsimport{useCallback}from'react'import{useModule,dispatch}from'./modules'functionApp(){/** * Here you can also pass in an array and return multiple module states at the same time * const {user, project} = useModule(['user', 'project']) */const{ user}=useModule('user')constonChange=useCallback((e)=>{const{ target}=edispatch.user.setName({name:target.value})},[])constonClick=useCallback(()=>{dispatch.user.fetchNameAndSet()},[])return(<divclassName="App"><div><div> name:{user.name}</div><div> modify:<inputonChange={onChange}></input></div><buttononClick={onClick}>getUserName</button></div></div>);}exportdefaultApp;
In many cases, there are common states, reducers, or effects between multiple modules, and here we expose the methods to prevent users from making duplicate declarations in each module.
// common.tsconstcommon={reducers:{ setValue<State>({payload, state}:{payload:Record<string, any>,state:State}):State{return{...state, ...payload}}}}exportdefaultcommon;// modules/index.tsimportcommontfrom'./common'importuserfrom'./user'import{mixin}from'clean-state';// Mix Common's setValue method into the User moduleconstmodules=mixin(common,{ user})// You can now call the dispatch.user.setValue method on other pagesexportconst{useModule, dispatch}=bootstrap(modules);
Module state, which is a property object.
{ name: 'zhangsan', order: 1}A collection of handlers that change the state of a module, returning the latest state.
{ setValue({payload, state, rootState}) { return {...state, ...payload} }}Module's collection of side effects methods that handle asynchronous calls.
{ async fetchAndSetValue({payload, state, rootState, dispatch}) { const newOrder = await fetch('xxx') dispatch.user.setValue({order: newOrder}) }}| Property | Description | Type |
|---|---|---|
| modules | A collection of registered modules | {string, Module} |
| Property | Description | Type |
|---|---|---|
| moduleName | The name of the module used returns the corresponding status | string / string[] |
| Property | Description | Type |
|---|---|---|
| common | Public modules that need to be injected | Module |
| modules | A collection of registered modules | Module |
| Property | Description | Type |
|---|---|---|
| moduleName | The specific module name of the call should be registered in Bootstrap | string |
| fnName | The method name of the call module, reducer/effect | string |
| payload | The load value passed | object |
You can usecs-redux-devtool to debug your project and track historical data changes.
Dispatch calls take precedence at effects-> reducers, so when there are reducers and effects with the same name under a module, only effects are executed.
If you have better suggestions for this library, or have any problems using it, you can write them here:https://github.com/tnfe/clean-state/issues
About
🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. 🍋
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.