- counter
- toggle
- value
- set-simple
- task-simple
- list
State structure
type ToggleState = boolean;
// toggle state example
false; // :)
// reducers.js
import { combineReducers } from "redux";
import { createReducer } from "power-reducers/toggle";
import { OPEN, CLOSE, SUBMIT, TOGGLE_FULLSCREEN } from "./actions";
const [modalIsVisible] = createReducer({
makeTrueOn: OPEN,
makeFalseOn: [CLOSE, SUBMIT]
// other parameters
});
const [modalIsFullscreen] = createReducer({
initial: false,
toggleOn: TOGGLE_FULLSCREEN
});
export default combineReducers({
modalIsVisible,
modalIsFullscreen
});
[
reducerFunction, // (state, action) => newState
{
getInitialState, // () => initialState
generateState // (value: boolean) => taskSimpleState
}
] = createReducer(/* ... */);
Initial/default value.
type: boolean
default: false
What action(s) toggles the state (true/false)
// action example:
{ type: "TOGGLE_FULLSCREEN", ... }
What action(s) will make state
true
// action example:
{ type: 'SHOW_MODAL', ... }
What action(s) will make state
false
// action example:
{ type: "HIDE_MODAL", ... }
What action(s) will manually set state
// action example:
{
type: "SET_MODAL_VISIBILITY",
payload: false // "payload" is default data field name
}
What action(s) will reset value to initially set.
// action example:
{ type: "RESET_VISIBILITY", ... }
Create own reducers for different action(s) types (try to avoid this).
Example
createReducer({
// ...
_customHandlers: [
{
type: "SOME_ACTION",
handler: (state, action) => {
// return new state for action.type === "SOME_ACTION"
}
}
]
});
1 type HandlerOption - single item or Array containing the following types (can be mixed):
Parameter example | Valid action example |
---|---|
"SET_VALUE" |
{ type: "SET_VALUE", payload: /* some data */ } |
{ type: "SET_VALUE" } |
{ type: "SET_VALUE", payload: /* some data */ } |
{ type: "SET_VALUE", payload: "ids" } |
{ type: "SET_VALUE", ids: /* some data */ } |
{ type: "SET_VALUE", payload: (action) => someData |
{ type: "SET_VALUE", /* data to be resolved */ } |