Slice and compose redux-type reducers.
|
6 år sedan | |
---|---|---|
src | 6 år sedan | |
.babelrc | 6 år sedan | |
.gitignore | 7 år sedan | |
LICENSE | 7 år sedan | |
README.md | 6 år sedan | |
index.js | 6 år sedan | |
package-lock.json | 6 år sedan | |
package.json | 6 år sedan |
subReducer(key, reducer, additionalKey, ...)
Creates a wrapper reducer that calls reducer
on the sub-state specified by key
.
Key can go in different formats, see deepGetOrNil
below.
Rest of the state is left untouched.
const r = subReducer("persons", personReducer);
r({persons: ["John", "Jill"], cars: ["Honda"]}, action);
// => {
// persons: personReducer(["John", "Jill"], action),
// cars: ["Honda"]
// }
Respects redux convention that if no change was made,
the identical object should be returned. So in previous case,
if personReducer
would return the identical array,
r
would return the state object it was passed in.
If persons were deeper in hierarchy, it could have been created as
const r = subReducer("files.persons", personReducer);
for example.
You may pass additional keys as addition arguments. In that case, additional parts of state will be fetched and passed to a sub-reducer:
const r = subReducer("persons", personReducer, "assets.cars");
r({persons: ["John", "Jill"], assets: {cars: ["Honda"]}}, action);
// => {
// persons: personReducer(["John", "Jill"], action, ["Honda"]),
// assets: {cars: ["Honda"]}
// }
This technique is mentioned in Redux docs, in "Beyond combineReducers" page.
subMiddleware(key | selectorFn, middleware)
Creates a wrapper middleware
on the sub-state specified by key
or the selector function selectorFn
by decorating getState
part of the passed arg.
The key
can have different format, see deepGetOrNil
below.
Rest of the passed arg is left untouched.
const r = subMiddleware("persons", ({getState}) => next => action => {
console.log(JSON.stringify(getState()));
return next(action);
});
const altR = subMiddleware(state => state.persons, ({getState}) => next => action => {
console.log(JSON.stringify(getState()));
return next(action);
});
// use r or altR in creation of store
store.getState();
// => {persons: ["John", "Jill"], cars: ["Honda"]}
store.dispatch({type: "any"});
// console => ["John","Jill"]
If persons were deeper in hierarchy, it could have been created as
const r = subMiddleware("files.persons", ...);
for example.
You can use subMiddleware
to sub-state anything
getting one parameter in which
one of the properties passed is getState
function;
it is not special-case for middleware.
For example, it is usable for wrapping redux-effex
effect function.
subEffex(key | selectorFn, effects)
Creates a wrapper around each element
of the effects array
on the sub-state specified by key
or by selector function selectorFn
by decorating effect
function with subMiddleware
and returns the array of the wrapped effects.
const effects = [{
action: "foo",
effect: ({getState}) => {
console.log(JSON.stringify(getState()));
}
}];
const e = subEffex("persons", effects);
const altE = subEffex(state => state.persons, effects);
// use e or altE in creation of store
store.getState();
// => {persons: ["John", "Jill"], cars: ["Honda"]}
store.dispatch({type: "foo"});
// console => ["John","Jill"]
composeReducers(reducer1, reducer2, ...)
Creates a wrapper reducer that calls passed reducers one after another, passing intermediate states. and returning the result of the last one.
Useful to "concatenate" a few subReducer
s. like:
composeReducers(
subReducer("files.persons", personReducer, "assets.swag"),
subReducer("files.clients", clientReducer, "news"),
subReducer("assets", assetReducer),
baseReducer
)
typedAction(type, [fn])
This creates an action creator function that amends existing fn
by:
type
property to the result, as well asTYPE
property to action creator itself.So for example:
export const answerQuestion =
typedAction("answer question", (index, answer) => ({
payload: {index, answer}
}));
allows you to call answerQuestion(2, "Albert Einstein")
to create
{type: "answer question", payload: {index: 2, answer: "Albert Einstein"}}
;
but it also allows you to use case answerQuestion.TYPE:
in your reducer,
since answerQuestion.TYPE === "answer question"
.
IOW, this removes the two-space problem of having const FOO_BAR_TYPE
as well as fooBar
action creator.
In case you don't pass the fn
argument, the action creator only creates {type}
.