Reducer Helpers

🍍

Saga Slice Helpers

Search…

Get Started

API

Reducer Helpers

The following helpers are available for use with your saga slices. When used in combination with the other helpers, it makes development of new sagas much quicker.
readAllSuccess(state, payload)
Sets the isFetching state to false.
Maps the response payload into an object formatted like { [item.id]: item }
1
state.data = Object.values(payload || {})
2
    .reduce((a, c) => ({
3
        ...a,
4
        [c.id]: c
5
    }), {});
Copied!
readOneSuccess(state, payload)
Sets the isFetching state to false.
Maps response to data by id
1
state.data[payload.id] = {
2
    ...(state.data[payload.id] || {}),
3
    ...payload
4
};
Copied!
createSuccess(state, payload)
Sets the isFetching state to false
Maps response to data by id
1
state.data[payload.id] = payload;
Copied!
updateSuccess(state, payload)
Sets the isFetching state to false.
Maps response to data by id
1
state.data[payload.id] = {
2
    ...(state.data[payload.id] || {}),
3
    ...payload
4
};
Copied!
deleteSuccess(state, payload)
Sets the isFetching state to false.
Deletes item from data
1
delete state.data[payload.id];
Copied!
failReducer(state, payload)
Sets the isFetching state to false.
1
state.isFetching = false;
2
state.error = payload;
Copied!
loadingReducer(state, payload)
Sets the isFetching state to true.
notLoadingReducer(state, payload)
Sets the isFetching state to false.
setCurrent(state, payload)
If passed a number or string, sets state.current to an item in state.data
If passed an object, sets state.current to payload
1
if (payload.constructor === Object) {
2
    state.current = payload;
3
}
4
​
5
if (payload.constructor === Number || payload.constructor === String) {
6
    state.current = state.data[payload];
7
}
Copied!
resetCurrent(state, payload)
Sets state.current to null
crudInitialState(extendState)
Returns a state object structured to work with other helper functions. You can extend or overwrite the current state elements by passing an extended state. This function returns:
1
const initialState = {
2
​
3
    isFetching: false,
4
    current: null,
5
    data: {},
6
    error: null,
7
    ...(extendState || {})
8
}
Copied!
crudReducers(extend, doneReducers) => CrudReducerInstance
Generates a map of reducers for CRUD use
Can be extended or overwritten by passing extend option
Done reducers are created if doneRecuders is set to true
1
const actions = crudReducers({
2
    // ... more reducers
3
}, true) // <-- creates `done` actions
4
​
5
const {
6
    setCurrent,
7
    resetCurrent,
8
    readAll, // loadingReducer
9
    readOne, // loadingReducer
10
    create, // loadingReducer
11
    update, // loadingReducer
12
    patch, // loadingReducer
13
    delete, // loadingReducer
14
    readAllSuccess,
15
    readOneSuccess,
16
    createSuccess,
17
    updateSuccess,
18
    patchSuccess
19
    deleteSuccess,
20
    readAllFail, // failReducer
21
    readOneFail, // failReducer
22
    createFail, // failReducer
23
    updateFail, // failReducer
24
    patchFail, // failReducer
25
    deleteFail, // failReducer
26
    readAllDone, // only if doneReducers is true, noop
27
    readOneDone, // only if doneReducers is true, noop
28
    createDone, // only if doneReducers is true, noop
29
    updateDone, // only if doneReducers is true, noop
30
    deleteDone, // only if doneReducers is true, noop
31
} = actions;
Copied!
lifecycleReducers(name, reducers)
Creates a map of reducers specific to an ajax request lifecycle similar to what you see in crudReducers, but only for 1 method call.
reducers is an optional parameter. If the reducers are not specified, it will be provided a default. The reducers are overwritten using main for the main action, success for success action, fail for fail action, and done can be a boolean or a function.
Param
Type
Required
Description
Default
name
string
yes
name of action
n/a
reducers
object
no
object of reducers
empty object
reducers.main
function
no
main reducer created from name argument as name
loadingReducer
reducers.success
function
no
success reducer created from name argument as nameSuccess
notLoadingReducer
reducers.fail
function
no
fail reducer created from name argument as nameFail
failReducer
reducers.done
function | boolean
no
optional done reducer is boolean or reducer function create as nameDone
false or noop
Example:
1
const {
2
    getTodo,
3
    getTodoSuccess,
4
    getTodoFail,
5
    getTodoDone
6
} = lifecycleReducers('getTodo', {
7
    success: (state, payload) => state.data = payload,
8
    done: true
9
})
Copied!
noop()
Does nothing. Used for declaring reducers.