13 | project count: {project.count}
14 |
15 |
16 | })
17 |
18 | export default Project
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import typescript from 'rollup-plugin-typescript';
2 | import { terser } from 'rollup-plugin-terser';
3 |
4 | module.exports = {
5 | external: ['react', 'eventemitter3'],
6 | input: 'src/index.ts',
7 | plugins: [
8 | typescript({
9 | exclude: 'node_modules/**',
10 | typescript: require('typescript'),
11 | }),
12 | terser(),
13 | ],
14 | output: [
15 | {
16 | format: 'umd',
17 | name: 'clean-state',
18 | file: 'lib/index.min.js',
19 | },
20 | ],
21 | };
22 |
--------------------------------------------------------------------------------
/demo/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src",
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/src/helper.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Split Each module state and method
3 | * @param {object} modules
4 | */
5 | export function splitPropertyAndMethod(modules: Record
20 |
30 |
32 | );
33 | }
34 |
35 | export default App;
--------------------------------------------------------------------------------
/src/mixin.ts:
--------------------------------------------------------------------------------
1 | import { Module, MixinModule } from '../index.d';
2 |
3 | /**
4 | * Mix in common variables and methods for all modules
5 | * @param {object} common
6 | * @param {object} modules
7 | */
8 | const mixin =
21 |
29 |
22 | name: {user.name}
23 |
24 |
25 | 修改用户名:
26 |
27 |
28 | 30 |
2 | 3 | English | 4 | 中文 5 | 6 |
7 | 8 |
9 | 
10 |
13 | 
14 | 
15 | 
16 |
17 |
18 | ## 概览
19 | 🐻 clean-state是一款纯净小巧的状态管理神器。它放下了React所有的历史包袱，使用原生hooks来实现，并摆脱了Redux在状态更新时的无效渲染问题。在架构层面它会通过一个极其简单的api来自动组织。🍋如果你不是要制造一艘航空母舰又厌烦了复杂且难用的大型状态管理库，那么不妨来试试Clean-State。它小巧玲珑、性能极致完全可以满足你的需求。
20 |
21 | ## 特性
22 | 1. 使用原生hooks实现，对外部零依赖。
23 | 2. 架构简单，module 层粒度精细可测，划分清晰。
24 | 3. 性能优异，可做到模块级别的精确更新。
25 | 4. 原生支持副作用。
26 | 5. 极其小巧，仅仅200行代码。
27 | 6. 仅仅是react语法，零学习接入成本。
28 | 7. 对Typescript支持友好，可以自动推导模块类型。
29 | 8. 支持redux-tool调试工具。
30 | 9. 完美支持RN开发。
31 |
32 | ## 安装
33 | ```javascript
34 | npm i clean-state --save
35 | ```
36 |
37 | ## 使用
38 | #### 1.定义一个模块
39 | ```javascript
40 | // modules/user.ts
41 | const state = {
42 | name: 'test'
43 | }
44 |
45 | const user = {
46 | state,
47 | reducers: {
48 | setName({payload, state}) {
49 | return {...state, ...payload}
50 | }
51 | },
52 | effects: {
53 | async fetchNameAndSet({dispatch}) {
54 | const name = await Promise.resolve('fetch_name')
55 | dispatch.user.setName({name})
56 | }
57 | }
58 | }
59 |
60 | export default user;
61 | ```
62 | #### 2.注册模块
63 | ```javascript
64 | // modules/index.ts
65 | import user from './user'
66 | import bootstrap from 'clean-state'
67 |
68 | const modules = { user }
69 | export const {useModule, dispatch} = bootstrap(modules);
70 | ```
71 |
72 | #### 3.使用模块
73 | ```javascript
74 | // page.ts
75 | import {useCallback} from 'react'
76 | import { useModule, dispatch } from './modules'
77 |
78 | function App() {
79 | /**
80 | * 这里你也能够传入数组同时返回多个模块状态
81 | * const {user, project} = useModule(['user', 'project'])
82 | */
83 | const { user } = useModule('user')
84 | const onChange = useCallback((e)=> {
85 | const { target } = e
86 | dispatch.user.setName({name: target.value})
87 | }, [])
88 |
89 | const onClick = useCallback(()=> {
90 | dispatch.user.fetchNameAndSet()
91 | }, [])
92 |
93 | return (
94 |
14 |
15 |
16 |
95 |
105 | );
106 | }
107 |
108 | export default App;
109 | ```
110 |
111 | ## 混入
112 |
113 | 在很多情况下，多个模块之间会存在公共的state、reducers或者effects，这里我们为了防止用户在每个模块里做重复声明，对外暴露了混入的方法。
114 |
115 | ```javascript
116 | // common.ts
117 | const common = {
118 | reducers: {
119 | setValue
96 |
104 |
97 | name: {user.name}
98 |
99 |
100 | 修改用户名:
101 |
102 |
103 |
197 | 
198 |
2 | 3 | English | 4 | 中文 5 | 6 |
7 | 8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 | ## Overview
19 | 🐻 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.
20 |
21 | ## Features
22 | 1. Using native hooks implementation, zero external dependencies.
23 | 2. The structure is simple, the module layer granularity is fine and measurable, and the division is clear.
24 | 3. Excellent performance, can do module level accurate update.
25 | 4. Native support side effects.
26 | 5. It's extremely small, just 200 lines of code.
27 | 6. Just React syntax, zero learning access cost.
28 | 7. TypeScript friendly and automatically deduces module types.
29 | 8. Support for Redux - Tool debugging tool.
30 | 9. Perfect support for RN.
31 |
32 | ## Installation
33 | ```javascript
34 | npm i clean-state --save
35 | ```
36 |
37 | ## Usage
38 | #### 1.Define a module
39 | ```javascript
40 | // modules/user.ts
41 | const state = {
42 | name: 'test'
43 | }
44 |
45 | const user = {
46 | state,
47 | reducers: {
48 | setName({payload, state}) {
49 | return {...state, ...payload}
50 | }
51 | },
52 | effects: {
53 | async fetchNameAndSet({dispatch}) {
54 | const name = await Promise.resolve('fetch_name')
55 | dispatch.user.setName({name})
56 | }
57 | }
58 | }
59 |
60 | export default user;
61 | ```
62 |
63 | #### 2.Registration module
64 | ```javascript
65 | // modules/index.ts
66 | import user from './user'
67 | import bootstrap from 'clean-state'
68 |
69 | const modules = { user }
70 | export const {useModule, dispatch} = bootstrap(modules);
71 | ```
72 |
73 | #### 3.Use the module
74 | ```javascript
75 | // page.ts
76 | import {useCallback} from 'react'
77 | import { useModule, dispatch } from './modules'
78 |
79 | function App() {
80 | /**
81 | * Here you can also pass in an array and return multiple module states at the same time
82 | * const {user, project} = useModule(['user', 'project'])
83 | */
84 | const { user } = useModule('user')
85 | const onChange = useCallback((e)=> {
86 | const { target } = e
87 | dispatch.user.setName({name: target.value})
88 | }, [])
89 |
90 | const onClick = useCallback(()=> {
91 | dispatch.user.fetchNameAndSet()
92 | }, [])
93 |
94 | return (
95 |
14 |
15 |
16 |
96 |
106 | );
107 | }
108 |
109 | export default App;
110 | ```
111 |
112 | ## Mixin
113 |
114 | 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.
115 |
116 | ```javascript
117 | // common.ts
118 | const common = {
119 | reducers: {
120 | setValue
97 |
105 |
98 | name: {user.name}
99 |
100 |
101 | modify:
102 |
103 |
104 |
198 |
199 |