A modern Redux utility library delivering quick operation, loading data, & extras.
Using npm:
$ npm i --save redux-control
[path: array | string, data: any] | [{ path: array | string, data: any }[]]
void
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'
import useReduxControl, { set } from 'redux-control'
function reducer(state = {}, action) {
return state
}
const store = createStore(useReduxControl(reducer), applyMiddleware(thunk))
store.subscribe(() => {
console.log(store.getState())
// { level1: { level2: { name: "Bob" } } }
})
store.dispatch(set('level1.level2.name', 'Bob'))
path: array | string
defaultValue?: any
any
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'
import useReduxControl, { get } from 'redux-control'
const initState = { level1: { level2: { name: 'Bob' } } }
function counter(state = initState, action) {
return state
}
const store = createStore(useReduxControl(counter), applyMiddleware(thunk))
const name = store.dispatch(get('level1.level2.name'))
console.log(name)
// 'Bob'
{
path: string[] // The path where the return value is stored
fetchFunc: () => void // Function of loading data
formate: (data: any) => any // Function of formatting the returned data
ttl: number // Valid time of the data
loadingSuffix: string // Store the suffix of the load information key
}
Promise<any>
The return value of an asynchronous request
import { applyMiddleware, createStore } from 'redux'
import useReduxControl, { tryToFetch } from 'redux-control'
import thunk from 'redux-thunk'
function reducer(state = {}, action) {
return state
}
const store = createStore(useReduxControl(reducer), applyMiddleware(thunk))
store.subscribe(() => {
console.log(store.getState())
// { level1:
// { level2Loading: { loading: true, loadingTime: 1565193263003 } } }
// After ~1000m
// { level1:
// {
// level2Loading:
// { loading: false,
// loadingTime: 1565193263003,
// updateTime: 1565193264020 },
// level2: { name: 'redux' } } }
})
const getDate = () =>
new Promise(resolve => {
setTimeout(() => {
resolve({ name: 'redux' })
}, 1000)
})
const fetch = async () => {
await store.dispatch(
tryToFetch({
path: 'level1.level2',
fetchFunc: getDate,
ttl: 1000
})
)
}
fetch()
store: redux.Store
store: redux.Store
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'
import useReduxControl, { set, autoDispatch } from 'redux-control'
function reducer(state = {}, action) {
return state
}
const store = createStore(useReduxControl(reducer), applyMiddleware(thunk))
autoDispatch(store)
store.subscribe(() => {
console.log(store.getState())
// { level1: { level2: { name: "Bob" } } }
})
set('level1.level2.name', 'Bob')
cancelAutoDispatch()