rxjs-redux-store
v1.1.0
Published
Simple redux store implemented using rxjs.
Downloads
2
Readme
rxjs redux store
a simple rxjs-based redux and redux-observable implementation
Usage
/* slice.js */
export default {
root: {
initialState: () => { return {} }
reducers: {
someReducer: (s,a) => { },
/* ... */
},
},
header: {
initialState: { active: true },
reducers: {
anotherReducer: (s,a) => { },
}
},
}
/* store.js */
import {ofMap, dispatch, mergeEpics, createStore} from "@t-wilkinson/rxjs-redux-store"
const [Provider, useStore, subscribe, actions] = createStore(myslices)
export {Provider, useStore, subscribe, actions, dispatch}
// ofMap([<filters>, <types>, (s,a) => {}])
// reducers defined in `slice.js` automatically pass the correct filter and type.
// however `dispatch` can be used to give the user full control of epics receive the action.
mergeEpics(
ofMap(["root"], ["someReducer"], (s,a) => { }),
ofMap(["header"], ["anotherAction"], (s,a) => { }),
)
/* header.jsx */
import {dispatch, useStore, actions} from "store"
const {header: {anotherReducer}} = actions
export default (props) => {
const headerState = useState(s=>s.header)
return <div>
<button
onClick={() => {
anotherReducer({active: false})
}}
>
Hide
</button>
<span>
{ headerState.active
? 'Active'
: 'Not active'
}
</span>
<button
onClick={() => {
/* This passes through to the 'epics' defined in `mergeEpics`
*/
dispatch({filter: "header", type: "anotherAction"})
}}
>
Another Action
</button>
</div>
}