		@@ -1,2 +0,7 @@
		# Clean-State
		<p align="right">
		<strong>
		<a href="./README.md">English</a> \|
		<a href="./docs/README-zh-cn.md">中文</a>
		</strong>
		</p>

		@@ -13,14 +18,15 @@ <p align="center">

		## 介绍
		🐻 一款纯净小巧的状态管理器，使用react-hooks原生实现，自动连接module组织架构。🍋如果你不是要制造一艘航空母舰又厌烦了复杂且难用的大型状态管理库，那么不妨来试试Clean-State。它小巧玲珑、性能极致完全可以满足你的需求。
		## 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.

		## 特性
		1. 使用 React 最新语法 useContext 和 useState 进行状态更新和同步。
		2. 架构简单易用，module 层粒度精细可测，划分清晰。
		3. 原生支持副作用，可异步和同步更新。
		4. 性能优异，一定程度上可以精确更新目标组件。
		5. 小巧，零依赖，仅100多行代码。
		6. 仅仅是react语法，零学习接入成本。
		## 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.

		## 安装
		## Installation
		```javascript
		@@ -30,98 +36,165 @@ npm i clean-state --save

		## 使用
		1. 模块定义
		## Usage
		#### 1.Define a module
		```javascript
		// user.ts
		export default {
		state: {
		name: ''
		},
		// modules/user.ts
		const state = {
		name: 'test'
		}

		const user = {
		state,
		reducers: {
		setName(payload, currentState) {
		const { name } = payload
		return {...currentState, name}
		setName({payload, state}: any) {
		return {...state, ...payload}
		}
		},
		effects: {
		async getUser{payload, rootState, dispatch}) {
		const { uId } = payload
		const user = await fetch.get(`xxx?uid=${uId}`)
		dispatch.user.setName({name: user.name})
		async fetchNameAndSet({dispatch}: any) {
		const name = await Promise.resolve('fetch_name')
		dispatch.user.setName({name})
		}
		},
		};
		}
		}

		export default user;
		```

		2. 模块注册
		#### 2.Registration module
		```javascript
		// index.ts
		import createContainer, { bootstrap } from 'clean-state';
		import user from 'user'
		// modules/index.ts
		import user from './user'
		import bootstrapfrom 'clean-state'

		const modules = {user}
		const modules = { user }
		export const {useModule, dispatch} = bootstrap(modules);
		```

		const setUp = bootstrap(modules);
		const cState = createContainer(setUp.useHook);

		export const { initialState } = setUp;
		export const { Provider, useModule } = cState;
		```

		3. 根节点引入
		#### 3.Use the module
		```javascript
		// app.ts
		import { Provider, initialState } from 'index.ts';
		function MyApp({ Component, pageProps }: AppProps): React.ReactElement {
		// todo: here can modify initialState
		return <Provider initialState={initialState}>
		<Component {...pageProps} />
		</Provider>;
		}
		```

		4. 组件调用
		```javascript
		// page.ts
		import { useModule } from 'index.ts';
		function Page() {
		const [state: {user}, dispatch] = useModule()
		const change = useCallback(()=> {
		const payload = { name: 'test' }
		dispatch.user.setName(payload)
		}, [])
		return <div>
		<button onClick={change}>modify</button>
		{user.name}
		<div>
		import {useCallback} from 'react'
		import { useModule, dispatch } from './modules'

		function App() {
		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;
		```

		## 混入
		在很多情况下，多个module之间会存在公共的state、reducers或者effects。
		## 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.

		```javascript
		// common.ts
		export default {
		const common = {
		reducers: {
		setValue<T>(payload: Record<keyof T, any>, state: T): T {
		return { ...state, ...payload };
		},
		},
		};
		setValue<State>({payload, state}: {payload: Record<string, any>, state: State}): State {
		return {...state, ...payload}
		}
		}
		}
		export default common;

		// index.ts
		import commont from 'common'
		import user from 'user'
		import { mixin } from 'src/store';
		// modules/index.ts
		import commont from './common'
		import user from './user'
		import { mixin } from 'clean-state';

		// user 模块混入了common的setValue方法
		// 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);

		```

		## 注意
		Dispatch优先级为 effects -> reducers，同模块下函数不允许同名。
		## 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[] \|

		### `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 \|

		### `mixin(common, modules)`
		\| Property \| Description \| Type \|
		\| :----: \| :----: \| :----: \|
		\| common \| Public modules that need to be injected \| Module \|
		\| modules \| A collection of registered modules \| Module \|

		## 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](https://github.com/tnfe/clean-state/issues)

		## License
		[MIT](./LICENSE)

clean-state - npm Package Compare versions

Improved metrics