@_dawiidio/react-rx-store 中文文档教程
Reactive store
Store for React 使用 RxJS
Project launch
build
npm run build
NPM install
npm i -P @_dawiidio/react-rx-store
Simple case study:
State 创建： ```jsx和谐 // 文件：counterState.jsx import { map, merge, bufferTime } from "rxjs/operators"; 从“rxjs”导入{间隔}； 从“@dawiidio/reactive-store”导入{createState}；
导出常量计数器 = createState( // 第一个参数 - 初始状态 { 计数器：0 }, // 第二个 - 动作，都在状态范围内。 每个动作都有自己的定制 // 第一个参数中的主题，每个动作都需要返回 Observable。 // 真正的动作存在于 map 中，它获取调用期间传递的值并 // 必须返回将进入第一个参数当前状态的第二个函数 // 并返回一个新的。 { 增量：（主题）=> 主题 。管道（ 合并（间隔（1000））， 映射（（值）=>（状态）=>（{ …状态， 计数器：state.counter + 值， } ) ), ) } );
How to connect component and state:
jsx和谐 // 文件：Counter.jsx 从'counterState.jsx'导入{计数器}； 从'@dawiidio/reactive-store'导入{withStore}；
导出函数 _Counter({ counter, increment }) { // increment(value) 是来自我们状态的动作，它等于 // 在动作主题上调用 next(value) 常量 onClick = () => 增量（计数器+ 10）；
返回 （
计数器值：
{ counter }
export const Counter = withStore(counter)(state => { // state === state declared in store，你可以传递很多商店，比如 // withStore(counter, users, …etc) 他们所有的动作和字段都会 // 在连接的组件道具中可用。
// 如果你只是像我一样返回相同的状态而不改变 // 让调用为空 - withStore(counter)()(Counter); 这是平等的 // 状态 => 状态。 返回状态； }, 动作 => { // 第二个函数可以改变来自商店的动作，就像状态一样，如果你 // 留空 call 表示“返回相同名称下的所有操作”。 返回操作； })(计数器); ```
Reactive store
Store for React which uses RxJS
Project launch
build
npm run build
NPM install
npm i -P @_dawiidio/react-rx-store
Simple case study:
State creation: ```jsx harmony // file: counterState.jsx import { map, merge, bufferTime } from "rxjs/operators"; import { interval } from "rxjs"; import { createState } from "@dawiidio/reactive-store";
export const counter = createState( // first argument - initial state { counter: 0 }, // second - actions, all in state scope. Every action gets own, custom // subject in first param and every action needs to return Observable. // Real action exists in map, it gets value passed during call and // must return second function which will get in first param current state // and return new one. { increment: (subject) => subject .pipe( merge(interval(1000)), map((value) => (state) => ({ …state, counter: state.counter + value, } ) ), ) } );
How to connect component and state:
jsx harmony // file: Counter.jsx import { counter } from 'counterState.jsx'; import { withStore } from '@dawiidio/reactive-store';
export function _Counter({ counter, increment }) { // increment(value) is action from our state and it is equal to // call next(value) on action subject const onClick = () => increment(counter + 10);
return (
Counter value:
{ counter }
export const Counter = withStore(counter)(state => { // state === state declared in store, you can pass many stores like // withStore(counter, users, …etc) all their actions and fields will // be available in connected component props.
// if you just return the same state without mutating like me then // leave call empty - withStore(counter)()(Counter); which is equal // to state => state. return state; }, actions => { // second functions can mutate actions from stores, same as state, if you // leave empty call it means "return all actions under the same names". return actions; })(Counter); ```
