redux-combinator

Alternative reducer combinator for the redux library. Grouping action types and context names.

Usage no npm install needed!

<script type="module">
  import reduxCombinator from 'https://cdn.skypack.dev/redux-combinator';
</script>

README

redux-combinator

Alternative reducer combinator for the redux library. Grouping action types and context names.

Install

Install with npm:

$ npm install --save redux-combinator

Usage

Task list example.

This is an example to understand how the library works. Please... In real life, do not do this!

import { createStore } from 'redux';
import { rootReducer, addReducer } from 'redux-combinator';

// Create a Redux store holding the state of your app.
// Warning: Set default state!
let store = createStore(rootReducer, {});

// This reducer creates an array of tasks. The `taskList` context.
function reducerFirst(state, action) {
    
    switch (action.type) {
        case 'FILL_TASK':
            return action.payload.slice();
            
        case 'ADD_TASK':
            const copyForAdd = state.slice();
            copyForAdd.push(action.payload);
            return copyForAdd;
            
        case 'REMOVE_TASK':
            const index = state.indexOf(action.payload);
            if(index > -1) {
                const copyForRemove = state.slice();
                copyForRemove.splice(index, 1);
                return copyForRemove;
            }
            else {
                break;
            }
    }
    return state
}

// This reducer creates and supports tasks statistics. The `taskStat` context.
function reducerSecond(state, action, globalState) {
    
    // This action uses only this reducer.
    if(action.type === "CLEAR_TASK_STAT") {
        return {
            fill: 0, add: 0, remove: 0, total: 0
        }
    }
    
    // Update values for all action.
    let {
        fill, 
        add, 
        remove, 
        total: prevTotal
    } = state, 
    total = globalState.taskList.length;
    
    switch (action.type) {
        case 'FILL_TASK':
            fill++;
            break;
            
        case 'ADD_TASK':
            add ++;
            break;
            
        case 'REMOVE_TASK':
            if(prevTotal !== total) {
                remove ++
            }
            break;
    }
    
    return {fill, add, remove, total}
}

// Set reducer properties
reducerSecond.reducerActionTypes = ["ADD_TASK", "REMOVE_TASK", "FILL_TASK", "CLEAR_TASK_STAT"];
reducerSecond.reducerContext = "taskStat";
reducerSecond.reducerDefaultValue = {fill: 0, add: 0, remove: 0, total: 0};

// Add reducers
// The wrapper for the `rootReducer.add` method
addReducer(reducerFirst, ["ADD_TASK", "REMOVE_TASK", "FILL_TASK"], "taskList", []); // alternative syntax
addReducer(reducerSecond);

// Dispatch actions
store.dispatch({ type: "FILL_TASK", payload: ["One", "Two", "More..."] });
store.dispatch({ type: "ADD_TASK", payload: "This is task" });
store.dispatch({ type: "REMOVE_TASK", payload: "Two" });

console.log(store.getState());

Functions

createReducer([def])

Create new reducer combinator.

Use this function when there are several store objects in your project (createStore (reducer)). If you used only one root store (as Redux recommends), you should use the rootReducer, addReducer, setDefault, and getDefault functions.

Arguments

  1. def: any - Default store value, global context.

Returns

Function - new reducer function.

rootReducer(state, action)

Root reducer.

This function was created by the createReducer() function.

Arguments

  1. state: Object - The type of state to be held by the store.
  2. action: Object - The type of actions which may be dispatched.

Returns

Object - Result mixed state.

addReducer(reducer, [actionTypes], [context], [defaultValue])

Add new reducer.

This wrapper function is for the createReducer().add function.

Arguments

  1. reducer: Function - Reducer function.
  2. context: String|Number|Symbol - Context key, use '*' for global context (default).
  3. actionTypes: String|Number|Symbol|*[] - Action type name or action type collection.
  4. defaultValue: any - Any default value for used context. Ignored if added before.

The reducer function (reducerFunction) may contain (as an alternative) the following properties. In this case, it is not necessary to pass additional parameters to the function.

  • reducerFunction.reducerContext - Context key.
  • reducerFunction.reducerActionTypes - Action type name or action type collection.
  • reducerFunction.reducerDefaultValue - Any default value for used context.

See the example above.

setDefault(value, [context], [override])

Sets the default value for the context state.

This wrapper function is for the createReducer().setDefault function.

Arguments

  1. value: any - The context value.
  2. context: String|Number|Symbol - Context key, use '*' for global context.
  3. override: boolean = true - Modify if exists. Default is true.
getDefault([context])

Gets the default value for the context state.

This wrapper function is for the createReducer().getDefault function.

Arguments

  1. context: String|Number|Symbol - Context key, use '*' for global context.

Returns

* - Mixed value.

License

Copyright © 2019, GoshaV Maniako. Released under the MIT License.