Nihilism Philisophy Major

    @21epub/react-rxjs-store
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    @21epub/react-rxjs-store

    Rxjs store for react state management

    NPM JavaScript Style Guide Travis (.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

    Install

    npm i @21epub/react-rxjs-store

    DownloadsWeekly Downloads

    152

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • wwmmzz
    • gary.guzy
    • zhangwei0126
    • dxsix
    • liqiuliepub
    • wagon1104
    • xuyucheng
    • ongyuxing