@21epub/react-rxjs-store 中文文档教程
@21epub/react-rxjs-store
用于反应状态管理的 Rxjs 存储
Intro
这个包只提供选择小型或中型反应状态管理。 不取代
redux
或context reducer
生态系统。
对于反应> 16.8.0 React
状态管理的解决方案。
通过store.getState()
可以在任何地方同步获取store state。
为组件状态使用提供 useRxjsStore 挂钩。
Features
- [x] Easy-to-use
- [x] Fully TypeScript
- [x] No
context
orreducer
required - [x] Immutable by
immer
- [x] Async state flow by
rxjs
Install
npm install --save @21epub/react-rxjs-store
Usage
// store.ts : Store Definition
import RxjsStore, { RxjsStoreReducerParams } from '@21epub/react-rxjs-store'
interface State {
count: number
}
//Reducers Types definition (Recommanded)
interface Reducers<S> extends RxjsStoreReducerParams<S> {
increment: (state: S, payload: number) => S
decrement: (state: S, payload?: number) => S
}
const initState: State = {
count: 0
}
const reducers: Reducers<State> = {
// Sync state management
increment(state, payload = 1) {
return { ...state, count: state.count + payload }
},
decrement(state, payload = 1) {
return { ...state, count: state.count - payload }
}
}
export default new RxjsStore<State, Reducers<State>>(initState, reducers)
// Component.tsx : Component Hooks Usage
import React from 'react'
import store from './store'
const Component = () => {
const [state] = store.useRxjsStore()
const increment = () => {
store.reducers.increment(100)
}
const decrement = () => {
store.reducers.decrement(100)
}
return (
<>
<div>Create React TS Parcel Library Example ????</div>
<div>Count: {state.count}</div>
<button onClick={increment}>increment</button>
<button onClick={decrement}>decrement</button>
</>
)
}
export default Component
// otherUtil.ts : subscribe to store state change
import store from './store'
store.observable$.subscribe( nextState => {
console.log(nextState)
...
})
有关详细信息:请参阅示例
Developing and running on localhost
首先安装依赖项,然后为 parcel dev 安装 peerDeps:
npm install
npm run install-peers
在热模块重新加载模式下运行示例:
npm start
创建 parcel 生产构建:
npm run build-prod
创建捆绑库模块构建:
npm run build
Running
打开文件 dist/index.html html
在浏览器中
Testing
运行单元测试:
npm test
License
MIT © garryguzy
@21epub/react-rxjs-store
Rxjs store for react state management
Intro
This package only provide an opt for tiny or medium react state management . Not replace the
redux
orcontext reducer
ecosystem.
For react > 16.8.0
A solution for react state management .
Store state can be acquired anywhere through store.getState()
synchronously.
Provide useRxjsStore Hooks for Components State Usage.
Features
- [x] Easy-to-use
- [x] Fully TypeScript
- [x] No
context
orreducer
required - [x] Immutable by
immer
- [x] Async state flow by
rxjs
Install
npm install --save @21epub/react-rxjs-store
Usage
// store.ts : Store Definition
import RxjsStore, { RxjsStoreReducerParams } from '@21epub/react-rxjs-store'
interface State {
count: number
}
//Reducers Types definition (Recommanded)
interface Reducers<S> extends RxjsStoreReducerParams<S> {
increment: (state: S, payload: number) => S
decrement: (state: S, payload?: number) => S
}
const initState: State = {
count: 0
}
const reducers: Reducers<State> = {
// Sync state management
increment(state, payload = 1) {
return { ...state, count: state.count + payload }
},
decrement(state, payload = 1) {
return { ...state, count: state.count - payload }
}
}
export default new RxjsStore<State, Reducers<State>>(initState, reducers)
// Component.tsx : Component Hooks Usage
import React from 'react'
import store from './store'
const Component = () => {
const [state] = store.useRxjsStore()
const increment = () => {
store.reducers.increment(100)
}
const decrement = () => {
store.reducers.decrement(100)
}
return (
<>
<div>Create React TS Parcel Library Example ????</div>
<div>Count: {state.count}</div>
<button onClick={increment}>increment</button>
<button onClick={decrement}>decrement</button>
</>
)
}
export default Component
// otherUtil.ts : subscribe to store state change
import store from './store'
store.observable$.subscribe( nextState => {
console.log(nextState)
...
})
For Details: See Example
Developing and running on localhost
First install dependencies and then install peerDeps for parcel dev:
npm install
npm run install-peers
To run Example in hot module reloading mode:
npm start
To create a parcel production build:
npm run build-prod
To create a bundle library module build:
npm run build
Running
Open the file dist/index.html
in your browser
Testing
To run unit tests:
npm test
License
MIT © garryguzy