reactex

dependencies

how to use

npm i reactex --save

Example

import Reactex from 'reactex'
import { RootModule } from '../modules/Root/RootModule'
import { IRootState } from '../modules/Root/RootState'
export type IAppState = {
 root: IRootState
}
const reducers = {
 root: RootModule.reducer
}
const rStore = new Reactex.Store<IAppState>(reducers)
export default rStore.store

import { IAppState } from '../../store/store'
import Reactex from 'reactex'
import { IRootState, RootState } from './RootState'
export const RootModule = new Reactex.Module<IRootState, IAppState>('ROOT', RootState)
export const syncAction = RootModule.sync<string>('INIT', (state, payload) => {
 state.syncActionDone = true
 return state
})
export const asyncAction = RootModule.async<void, unknown, Error>('INIT2', async(payload, dispatch, getState) => {
 // async action
 return new Promise((resolve) => {
 window.setTimeout(() => {
 resolve()
 }, 3000)
 })
}, {
 started: (state) => {
 state.asyncActionStatus = 'started'
 },
 failed: (state) => {
 state.asyncActionStatus = 'failed'
 },
 done: (state) => {
 state.asyncActionDone = true
 state.asyncActionStatus = 'done'
 }
})
// Also can write like following
// 
// RootModule.case(asyncAction.started, state => {
// state.asyncActionStatus = 'started'
// }).case(asyncAction.failed, (state, { error }) => {
// console.error(error)
// state.asyncActionStatus = 'failed'
// }).case(asyncAction.done, (state, { params, result }) => {
// state.asyncActionDone = true
// state.asyncActionStatus = 'done'
// })

export type IRootState = {
 syncActionValue: string
 syncActionDone: boolean
 asyncActionDone: boolean
 asyncActionStatus: string
}
export const RootState: IRootState = {
 syncActionValue: '',
 syncActionDone: false,
 asyncActionDone: false,
 asyncActionStatus: ''
}

with react-router

import history from 'store/history'
import Reactex from 'reactex'
import { RootModule } from 'modules/Root/RootModule'
import { IRootState } from 'modules/Root/RootState'
import { connectRouter, routerMiddleware, RouterState } from 'connected-react-router'
export type IAppState = {
 root: IRootState,
 router: RouterState
}
const rStore = new Reactex.Store<IAppState>({
 root: RootModule.reducer,
 router: connectRouter(history)
}, [
 routerMiddleware(history)
])
export default rStore.store

with redux-devtools

const rStore = new Reactex.Store<IAppState>({
 root: RootModule.reducer,
 router: connectRouter(history)
}, [], true)

useDispatch with AsyncAction

const asyncDispatch = useDispatch<ThunkDispatch<any, any, AnyAction>>()

todo