redux-sac

redux-sac

Slice and compose redux-type reducers.

subReducer(key, reducer, additionalKey, ...)

Creates a wrapper reducer that calls reducer on the sub-state specified by key. You may use dot notation. 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 (also with possible dot-notation) 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.

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 subReducers. like:

composeReducers(
  subReducer("files.persons", personReducer, "assets.swag"),
  subReducer("files.clients", clientReducer, "news"),
  subReducer("assets", assetReducer),
  baseReducer
)

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. You may use dot notation. 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"] 

Redux helpers

cowValueModel(key, ...)

Creates an overloaded function allowing to set or get specified key from any object. Get when one arg, set when two args. Specify keys by passing a list of keys to cowValueModel. You can use dot notation.

Set-usage (two-arg) returns a copy with specified (sub-)property changed; in case no change actually happens, returns the original object.

const name = cowValueModel("name");
  
name({name: "Tom"});
// => "Tom"
name({name: "Tom"}, "Jerry");
// => {name: "Jerry"}
  
const city = cowValueModel("address.city");
const city2 = cowValueModel("address", "city");
const object = {address: {city: "New York"}};
  
city(object);
// => "New York"
city2(object);
// => "New York"
city(object, "London");
// => {address: {city: "London"}}
city2(object, "London");
// => {address: {city: "London"}}
object;
// => {address: {city: "New York"}}
city(object, "New York") === object;
// => true
city2(object, "New York") === object;
// => true

If you put a number in a list of keys to use, an object will be treated as an array (unlike the default string case, where it is treated as an object), so copy wil be created using [...obj], not using {...obj}.

That way you can create eg. const c = cowValueObject("person", 34, "name") to access obj.person[34].name with c(obj) / c(obj, val).

typedAction(type, fn)

This creates an action creator function that amends existing fn by:

• adding a type property to the result, as well as
• adding a TYPE 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.