1.1.7 • Published 5 years ago
rxjs-easy-store v1.1.7
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
- createStore
- removeStore
- getStore
- dispatch
- inject (A higher-order component provided for react)
- 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)