@21epub/react-rxjs-store 中文文档教程

发布于 3年前 浏览 28 项目主页 更新于 3年前

@21epub/react-rxjs-store

用于反应状态管理的 Rxjs 存储

NPMJavaScript 风格指南Travis (.com) Codecov

Intro

这个包只提供选择小型或中型反应状态管理。 不取代 reduxcontext reducer 生态系统。

对于反应> 16.8.0 React

状态管理的解决方案。

通过store.getState()可以在任何地方同步获取store state。

为组件状态使用提供 useRxjsStore 挂钩。

Features

  • [x] Easy-to-use
  • [x] Fully TypeScript
  • [x] No contextor reducer 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

NPMJavaScript Style GuideTravis (.com) Codecov

Intro

This package only provide an opt for tiny or medium react state management . Not replace the redux or context 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 contextor reducer 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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文