rxjs-easy-store

• RXJS based on a simple and lightweight state management tool
• Each module or function point can create its own store
• The same store can be used by multiple modules to ensure data sharing and data interaction between modules
• Global dispatch action to any store
• A higher-order component is provided for react to allow better connections to the store

Installation

$ npm install --save rxjs-easy-store

rxjs-easy-store currently provides six methods

1. createStore
2. removeStore
3. getStore
4. dispatch
5. inject (A higher-order component provided for react)
6. registerMiddleware

Example

createStore(object)

createStore({
    // The store name needs to be unique
    name: 'demo',
    // Component state
    state: {
        list: [{ name: 'XXX', id: 1 }]
    },
    // Process state to generate a new state
    reducers: {
        getList: (action, state) => {
            state.list = action.payload.data
            return state
        }
    },
    // Side effects handling can do ajax requests and business logic processing
    // Methods in effects are passed into injected components by default
    effects: {
       getList(action, state){
         ajax('url')).subscribe(res => {
            // dispatch action
            dispatch({
               name: 'workbook',
               type: 'getList',
               payload: {
                   data: res.value
               }
           })
         })
       }
    }
})

dispatch(action)

dispatch({
    // Same name as defined in the store
    name: 'demo', 
    // The reducers method name remains the same in the store
    type: 'getList',
    // The observer does not respond, and the component does not render.
    suspens: true,
    payload: {
        data: res.value
    }
})

getStore(name)

Get store can be store of any module (data sharing across modules)

const demoStore = getStore('demo')

removeStore(name)

Remove the store of any module, Returns a Boolean value

const removeRes = removeStore('demo')

inject(mapStateToProps, options)

Higher-order components used on react

inject(
	// The store parameter is the collection of all stores
	// You can store the data you need to pass into the component
	(store, props) => {
         return {
             list: store.demoStore.list,
             ...
         }
    },
    {
        store: 'demoStore', // Current sotre name

        /**
          Can respond to multiple stores
          When the values of store1 and store2 change and 
          the current component depends on the values in the store, 
          the current component will render again 
        */ 

        dependentStores: ['store1','store2'],
        forwardedRef?: boolean, // True is required when using ref
    }
)

registerMiddleware([middleware1, middleware2])

const middleware1 = store => next => (action, state) => {
     // Do something
     // ...
     next(action, state)
}
registerMiddleware([middleware1, ...])

Use rxjs-easy-store on react

// demoRxStore.js
import { createStore, dispatch}  from 'rxjs-easy-store'
import { from } from 'rxjs'
import { ajax } from 'rxjs/ajax';

export default createStore({
    name: 'demoStore',
    state: {
        list: [{ name: 'xx', id: 1 }]
    },
    reducers: {
        getList: (action, state) => {
            state.list = [...action.payload.data]
            return state
        },
        add: (action, state) => {
            state.list.push({...action.payload.data})
            return state
        }
    }, 
    effects: {
        getList: (params) => {
            from(ajax('url')).subscribe(res => {
                dispatch({
                    name: 'demoStore',
                    type: 'getList',
                    payload: {
                        data: res.value
                    }
                })
            })
        },
        add: (params) => {
          from(ajax({
               url: 'https://httpbin.org/post',
               method: 'POST',
               body: params,
          })).subscribe(res => {
             dispatch({
                 name: 'demoStore',
                 type: 'add',
                 payload: {
                    data: res
                 }
             })
          })
        }
    }
})

// A.jsx React component

import { inject, dispatch }  from 'rxjs-easy-store'
function A(props) {
    return (
       <div>
        {
            props.list.map(item => <div key={item.id}>{item.name}</div>)
        }
        // effects method can be obtained directly through props
        <button onClick={() => props.add({name:'xxx'}))
        }}>click</button>
    </div>
  )
}

export default inject(
    (store, props) => ({
        list: store.demoStore.list
    }),]
    {
        store: 'demoStore'
    }
)(A)