π» 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.
npm i clean-state --save
// modules/user.ts
const state = {
name: 'test'
}
const user = {
state,
reducers: {
setName({payload, state}) {
return {...state, ...payload}
}
},
effects: {
async fetchNameAndSet({dispatch}) {
const name = await Promise.resolve('fetch_name')
dispatch.user.setName({name})
}
}
}
export default user;
// modules/index.ts
import user from './user'
import bootstrap from 'clean-state'
const modules = { user }
export const {useModule, dispatch} = bootstrap(modules);
// page.ts
import {useCallback} from 'react'
import { useModule, dispatch } from './modules'
function App() {
/**
* 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')
const onChange = useCallback((e)=> {
const { target } = e
dispatch.user.setName({name: target.value})
}, [])
const onClick = useCallback(()=> {
dispatch.user.fetchNameAndSet()
}, [])
return (
<div className="App">
<div>
<div>
name: {user.name}
</div>
<div>
modify: <input onChange={onChange}></input>
</div>
<button onClick={onClick}>getUserName</button>
</div>
</div>
);
}
export default App;
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.ts
const common = {
reducers: {
setValue<State>({payload, state}: {payload: Record<string, any>, state: State}): State {
return {...state, ...payload}
}
}
}
export default common;
// modules/index.ts
import commont from './common'
import user from './user'
import { mixin } from 'clean-state';
// Mix Common's setValue method into the User module
const modules = mixin(common, { user })
// You can now call the dispatch.user.setValue method on other pages
export const {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 {...payload, ...state}
}
}
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 use cs-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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.