Add combine reducer to the library

So last time I had dug a bit into redux and created a basic library https://medium.com/@aashish.y2z/create-a-simple-library-similar-to-redux-eaada4442fe4 which just maintained the state and nothing more, now we dive a bit further and more functionality to make it a bit more like the redux that we use. So picking up from last time we firstly add a combine reducer functionality as it is just manipulation of object and nothing much. A quick change is that I have added airbnb , an eslint to code better hope you guys will add it too as it makes your coding standard really good. So my updated package is :

Added airbnb

And to use this we add a .eslintrc file in the root with following contents.

{
“parser”: “babel-eslint”,
“extends”: “airbnb”,
“rules”: {
  “react/jsx-filename-extension”: [1, { “extensions”: [“.js”, “.jsx”] }],
“react/jsx-one-expression-per-line”: [0]
 }
}

Make sure you remove all the warnings and errors made by this , but of course this is optional , it just helped me to code better so i thought why not share this as well.

Now we simply add a file in src folder naming it combineReducer.js , which will have following contents :

const combineReducer = (reducers) => {
 return (state = {}, action) => {
   return Object.keys(reducers).reduce(
      (nextState, key) => {
          nextState[key] = reducers[key](
                            state[key],
                            action,);
  return nextState;
  },
  {},
  );
 };
};
module.exports = combineReducer;

So this simply returns the combined store as a single object which is what we wanted now we expose this in our index.js file as:

const createStore = require(‘./src/createStore’);
const combineReducer = require(‘./src/combineReducer’);
module.exports = {
 createStore,
 combineReducer,
};

We test the code , i have made two section for every phase one being where the is code and other named test along with it. So we have folder structure for this code as :

Folder Structure

And for test we have folder structure as :

Folder Structure for Test

Notice how we have our library inside the packages file, well we did it so as to access our library locally and our test and library are inside same folder so it maintains a interdependencies. To add the dependencies we add it in package.json file that lies in the root structure.

Package.json file for the test branch

so the interlinkage is defined by the keyword workspaces and the devdependencies will be available for all the project inside our packages. Now on to testing, i have named a folder “test” , we check if our combine reducer does work or not.

const { createStore, combineReducer } = require(‘redux-clone’);
const initalstateIncrement = {
increment: 0,
};
const initalstateDecrement = {
decrement: 0,
};
const incrementReducer = (state = initalstateIncrement, action) => {
 switch (action.type) {
    case ‘INCREMENT’:
      return Object.assign({}, state, {
             increment: state.increment + 1,});
    default:
      return state;
  }
}; // our first reducer

const decrementReducer = (state = initalstateDecrement, action) => {
    switch (action.type) {
      case ‘DECREMENT’:
         return Object.assign({}, state, {
           decrement: state.decrement — 1,
         });
     default:
      return state;
     }
}; // second reducer
const reducer = combineReducer({ // the library we just made
incrementReducer,
decrementReducer,
});
const store = createStore(reducer);
// get state of the current reducer
console.log(‘combined reducer :’, store.getState());

The output will be :

Combined Reducer

Clap Clap we made a combined reducer and even tested it.

library code : https://github.com/karkipy/redux-clone/tree/phaseTwo

To test this library

test code: https://github.com/karkipy/redux-clone/tree/phaseTwo-Test