What is Redux ?

  • state management library
  • makes creating complex applications easier
  • not required to create a React app
  • not explicitly designed to work with React

  • A predictable state container for JavaScript apps
  • Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test

Redux Cycle

  • Action Creator
  • Action
  • dispatch
  • Reducers
  • State



We will do an example, a model of insurance company.

  • policy - customer holds a policy, if bad stuff happends to them then we pay them
  • claim - customer had something bad happen to them, we need to pay them



Customer will bring to our company new Form. There is Form receiver, which will pass the form to correct department Claims History, Policies or Accounting.

Each ‘Form’ is an object, which has Type and Payload.

  • type - name, claim or policy
  • payload - contains name of customer and value


    We will have 3 types of form
  • Create Policy
  • Create Claim
  • Delete Policy



So when we put this to redux cycle, it will look like this:

  • Action Creator = Person dropping off the form
  • Action = the form
  • dispatch = form receiver
  • Reducers = Departments
  • State = Compiled department data

    Following code can be tested at codepen.io. 

//people dropping off a form (Action Creators)
const createPolicy = (name, amount) => {
    return { //Action (a form in our analogy)
        type: 'CREATE_POLICY',
        payload: {
            name: name,
            amount: amount
        }
    }
}


const deletePolicy = (name) => {
    return { //Action (a form in our analogy)
        type: 'DELETE_POLICY',
        payload: {
            name: name
        }
    }
}

const createClaim = (name, amountOfMoneyToCollect) => {
    return { //Action (a form in our analogy)
        type: 'CREATE_CLAIM',
        payload: {
            name: name,
            amountOfMoneyToCollect: amountOfMoneyToCollect
        }
    }
}

//Reducers (Departments)
const claimsHistory = (oldListOfClaims = [], action) => {
    if (action.type === 'CREATE_CLAIM') {
        //we care about the action (form)
        //in reducers we are always returning new array, so we are not using push
        return [...oldListOfClaims, action.payload];
    }

    //we dont care about the action (form)
    return oldListOfClaims;
}

//lets image we have money of value 100 in the beginning of our company
const accounting = (bagoOfMoney = 100, action) => {
    if (action.type === 'CREATE_CLAIM') {
        return bagoOfMoney - action.payload.amountOfMoneyToCollect;
    } else if (action.type === 'CREATE_POLICY') {
        return bagoOfMoney + action.payload.amountOfMoneyToCollect;
    }

    return bagoOfMoney;
}

const policies = (listOfPolicies = [], action) => {
    if (action.type === 'CREATE_POLICY') {
        return [...listOfPolicies, action.payload.name];
    } else if (action.type === 'DELETE_POLICY') {
        return listOfPolicies.filter(name => name !== action.payload.name);
    }

    return listOfPolicies;
}

const { createStore, combineReducers } = Redux;

const ourDepartments = combineReducers({
    accounting: accounting,
    claimsHistory: claimsHistory,
    policies: policies
});

const store = createStore(ourDepartments);
store.dispatch(createPolicy('Alex', 20));
store.dispatch(createPolicy('Jim', 40));
store.dispatch(createPolicy('Bob', 20));
store.dispatch(createClaim('Alex', 120));
console.log(store.getState());