English | 中文

Overview

🐻 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.

Features

1. Using native hooks implementation, zero external dependencies.
2. The structure is simple, the module layer granularity is fine and measurable, and the division is clear.
3. Excellent performance, can do module level accurate update.
4. Native support side effects.
5. It's extremely small, just 200 lines of code.
6. Just React syntax, zero learning access cost.
7. TypeScript friendly and automatically deduces module types.
8. Support for Redux - Tool debugging tool.
9. Perfect support for RN.

Installation

1npm i clean-state --save

Usage

1.Define a module

1// modules/user.ts
2const state = {
3  name: 'test'
4}
5
6const user = {
7  state,
8  reducers: {
9    setName({payload, state}) {
10      return {...state, ...payload}
11    }
12  },
13  effects: {
14    async fetchNameAndSet({dispatch}) {
15      const name = await Promise.resolve('fetch_name')
16      dispatch.user.setName({name})
17    }
18  }
19}
20
21export default user;

2.Registration module

1// modules/index.ts
2import user from './user'
3import bootstrap from 'clean-state'
4
5const modules = { user }
6export const {useModule, dispatch}  = bootstrap(modules);

3.Use the module

1// page.ts
2import {useCallback} from 'react'
3import { useModule, dispatch } from './modules'
4
5function App() {
6  /** 
7   * Here you can also pass in an array and return multiple module states at the same time 
8   * const {user, project} = useModule(['user', 'project'])
9   */
10  const { user } = useModule('user')
11  const onChange = useCallback((e)=> {
12    const { target } = e
13    dispatch.user.setName({name: target.value})
14  }, [])
15
16  const onClick = useCallback(()=> {
17    dispatch.user.fetchNameAndSet()
18  }, [])
19
20  return (
21    <div className="App">
22      <div>
23        <div>
24          name: {user.name}
25        </div>
26        <div>
27          modify: <input onChange={onChange}></input>
28        </div>
29        <button onClick={onClick}>getUserName</button>
30      </div>
31    </div>
32  );
33}
34
35export default App;

Mixin

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.

1// common.ts
2const common = {
3  reducers: {
4    setValue<State>({payload, state}: {payload: Record<string, any>, state: State}): State {
5      return {...state, ...payload}
6    }
7  }
8}
9export default common;
10
11// modules/index.ts
12import commont from './common'
13import user from './user'
14import { mixin } from 'clean-state';
15
16// Mix Common's setValue method into the User module
17const modules = mixin(common, { user })
18
19// You can now call the dispatch.user.setValue method on other pages
20export const {useModule, dispatch}  = bootstrap(modules);
21

Module

state

Module state, which is a property object.

{
    name: 'zhangsan',
    order: 1
}

reducers

A collection of handlers that change the state of a module, returning the latest state.

{
    setValue({payload, state, rootState}) {
        return {...payload, ...state}
    }
}

effects

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})
    }
}

API

bootstrap(modules)

Property	Description	Type
modules	A collection of registered modules	{string, Module}

useModule(moduleName)

Property	Description	Type
moduleName	The name of the module used returns the corresponding status	string / string[]

mixin(common, modules)

Property	Description	Type
common	Public modules that need to be injected	Module
modules	A collection of registered modules	Module

dispatch.{moduleName}.{fnName}(payload)

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

Debugging

You can use cs-redux-devtool to debug your project and track historical data changes.

Notice

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.

Issues

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

License

MIT