Skip to content

Instantly share code, notes, and snippets.

@csantiago132

csantiago132/combineReducers.js

Last active February 25, 2020 00:43
Show Gist options
  • Save csantiago132/0d2bc0b5e18fce613d70a6232f5ca42e to your computer and use it in GitHub Desktop.
Save csantiago132/0d2bc0b5e18fce613d70a6232f5ca42e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csantiago132 revised this gist Feb 25, 2020. 1 changed file with 44 additions and 6 deletions.
    50 changes: 44 additions & 6 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,51 @@
    // ... prev. code ommited
    import * as Immutable from "immutable";
    import * as React from "react";

    export const combineReducer = reducers => {
    // ... prev. code ommited
    const globalState = {};

    // set default state returned by reducer and its reducer
    for (const [key, value] of Object.entries(reducers)) {
    if (typeof value === "function") {
    globalState[key] = value(undefined, { type: "__@@PLACEHOLDER_ACTION__" });
    } else {
    console.error(`${value} is not a function`);
    }
    }

    /**
    * Global reducer function; this is passed to the useReducer hook
    *
    * @param {object} state
    * @param {object} action
    */
    const reducerFunction = (state, action) => {
    // ... prev. code ommited


    // finally, return the updatedStateByReducers if its not equal to the prevState
    let hasStateChanged = false;
    const updatedStateByReducers = {};

    /**
    * this is where dispatching happens;
    * the action is passed to all reducers one by one.
    * we iterate and pass the action to each reducer and this would return new
    * state if applicable.
    */
    for (const reducer in reducers) {
    if (reducers.hasOwnProperty(reducer)) {
    const currentStateByKey = state[reducer];
    const currentReducer = reducers[reducer];

    const returnedStateByReducer = currentReducer(currentStateByKey, action);

    const areStateByKeyEqual = returnedStateByReducer !== currentStateByKey;

    hasStateChanged = hasStateChanged || areStateByKeyEqual;

    updatedStateByReducers[reducer] = returnedStateByReducer;
    }
    }
    return hasStateChanged ? updatedStateByReducers : state;
    };

    // return the initial state and the global reducer
    return [globalState, reducerFunction];
    };
  2. csantiago132 revised this gist Feb 25, 2020. 1 changed file with 4 additions and 26 deletions.
    30 changes: 4 additions & 26 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,31 +5,9 @@ export const combineReducer = reducers => {

    const reducerFunction = (state, action) => {
    // ... prev. code ommited

    /**
    * this is where dispatching happens;
    * the action is passed to all reducers one by one.
    */
    for (const reducer in reducers) {
    if (reducers.hasOwnProperty(reducer)) {

    //match reducer with the state property it should update
    const currentStateByKey = state[reducer];

    // get the reducer based on key
    const currentReducer = reducers[reducer];

    // call each reducer and pass the action to it
    const returnedStateByReducer = currentReducer(currentStateByKey, action);

    // compared objects
    const areStateByKeyEqual = returnedStateByReducer !== currentStateByKey;

    hasStateChanged = hasStateChanged || areStateByKeyEqual;

    // replace prevState by the updated state we just got
    updatedStateByReducers[reducer] = returnedStateByReducer;
    }
    }


    // finally, return the updatedStateByReducers if its not equal to the prevState
    return hasStateChanged ? updatedStateByReducers : state;
    };
    };
  3. csantiago132 revised this gist Feb 25, 2020. 1 changed file with 32 additions and 14 deletions.
    46 changes: 32 additions & 14 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,35 @@
    // ... prev. code ommited

    export const combineReducer = (reducers) => {
    const globalState = {};

    for (const [key, value] of Object.entries(reducers)) {
    // check it its a reducer
    if (typeof value === 'function') {
    globalState[key] = value(undefined, { type: '__@@PLACEHOLDER_ACTION__' });
    } else {
    // let the developer know the value is not a reducer
    console.error(`${value} is not a function`);
    }
    }
    }

    export const combineReducer = reducers => {
    // ... prev. code ommited

    const reducerFunction = (state, action) => {
    // ... prev. code ommited

    /**
    * this is where dispatching happens;
    * the action is passed to all reducers one by one.
    */
    for (const reducer in reducers) {
    if (reducers.hasOwnProperty(reducer)) {

    //match reducer with the state property it should update
    const currentStateByKey = state[reducer];

    // get the reducer based on key
    const currentReducer = reducers[reducer];

    // call each reducer and pass the action to it
    const returnedStateByReducer = currentReducer(currentStateByKey, action);

    // compared objects
    const areStateByKeyEqual = returnedStateByReducer !== currentStateByKey;

    hasStateChanged = hasStateChanged || areStateByKeyEqual;

    // replace prevState by the updated state we just got
    updatedStateByReducers[reducer] = returnedStateByReducer;
    }
    }
    };
    };
  4. csantiago132 revised this gist Feb 24, 2020. 1 changed file with 10 additions and 15 deletions.
    25 changes: 10 additions & 15 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,16 @@
    // ... prev. code ommited

    export const combineReducer = (reducers) => {
    // ... prev. code ommited
    const globalState = {};

    /**
    * Global reducer function; this is passed to the useReducer hook
    *
    * @param {object} state
    * @param {object} action
    */
    const reducerFunction = (state, action) => {

    // used to compare prevState vs the one returned by the reducer
    let hasStateChanged = false;

    // updated state object to be returned
    const updatedStateByReducers = {};
    for (const [key, value] of Object.entries(reducers)) {
    // check it its a reducer
    if (typeof value === 'function') {
    globalState[key] = value(undefined, { type: '__@@PLACEHOLDER_ACTION__' });
    } else {
    // let the developer know the value is not a reducer
    console.error(`${value} is not a function`);
    }
    }
    }

  5. csantiago132 revised this gist Feb 24, 2020. 1 changed file with 2 additions and 18 deletions.
    20 changes: 2 additions & 18 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,7 @@
    import { reducers } from '../path'
    // ... prev. code ommited

    /**
    * Combines all reducers into one to create the root reducer of the
    * application
    *
    * @param {object} reducers
    */
    export const combineReducer = (reducers) => {
    const globalState = {};

    for (const [key, value] of Object.entries(reducers)) {
    // check it its a reducer
    if (typeof value === 'function') {
    globalState[key] = value(undefined, { type: '__@@PLACEHOLDER_ACTION__' });
    } else {
    // let the developer know the value is not a reducer
    console.error(`${value} is not a function`);
    }
    }
    // ... prev. code ommited

    /**
    * Global reducer function; this is passed to the useReducer hook
  6. csantiago132 revised this gist Feb 24, 2020. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,4 +18,21 @@ export const combineReducer = (reducers) => {
    console.error(`${value} is not a function`);
    }
    }

    /**
    * Global reducer function; this is passed to the useReducer hook
    *
    * @param {object} state
    * @param {object} action
    */
    const reducerFunction = (state, action) => {

    // used to compare prevState vs the one returned by the reducer
    let hasStateChanged = false;

    // updated state object to be returned
    const updatedStateByReducers = {};
    }
    }


  7. csantiago132 revised this gist Feb 24, 2020. 1 changed file with 11 additions and 2 deletions.
    13 changes: 11 additions & 2 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,5 +8,14 @@ import { reducers } from '../path'
    */
    export const combineReducer = (reducers) => {
    const globalState = {};
    const test = {}
    }

    for (const [key, value] of Object.entries(reducers)) {
    // check it its a reducer
    if (typeof value === 'function') {
    globalState[key] = value(undefined, { type: '__@@PLACEHOLDER_ACTION__' });
    } else {
    // let the developer know the value is not a reducer
    console.error(`${value} is not a function`);
    }
    }
    }
  8. csantiago132 revised this gist Feb 24, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions combineReducers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,4 +8,5 @@ import { reducers } from '../path'
    */
    export const combineReducer = (reducers) => {
    const globalState = {};
    const test = {}
    }
  9. csantiago132 renamed this gist Feb 24, 2020. 1 changed file with 0 additions and 0 deletions.
    0 combineReducers → combineReducers.js
    View file
    File renamed without changes.
  10. csantiago132 created this gist Feb 24, 2020.
    11 changes: 11 additions & 0 deletions combineReducers
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    import { reducers } from '../path'

    /**
    * Combines all reducers into one to create the root reducer of the
    * application
    *
    * @param {object} reducers
    */
    export const combineReducer = (reducers) => {
    const globalState = {};
    }