Redux sample code

console.clear();

//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 {
    type: 'DELETE_POLICY',
    payload: {
      name: name
    }
  }
}

const createClaim = (name, amountOfMoneyToCollect) => {
  return {
    type: 'CREATE_CLAIM',
    payload: {
      name: name,
      amountOfMoneyToCollect: amountOfMoneyToCollect
    }
  }
}

//Reducers (Departments!)
// use default values, make sure you copy arrays and dont modify them.
// reducers job is to take in an action and some data, then return a modified copy of the data based
// on the action that was passed in
const claimsHistory = (oldListOfClaims = [], action) => {
  if (action.type === 'CREATE_CLAIM') {
    //we care about this action (form)
    
    //never modify EXISTING data structure in reducers, create a copy and add the new data.
    return [...oldListOfClaims, action.payload]; //add a the claim to a NEW COPY of the oldlistofclaims
  }
  //we don't care about the form action..
  return oldListOfClaims;
}

const accounting = (bagOfMoney = 100, action) => {
  if (action.type === 'CREATE_CLAIM') {
    return bagOfMoney - action.payload.amountOfMoneyToCollect;
  } else if (action.type === 'CREATE_POLICY') {
    return bagOfMoney + action.payload.amount;
  }
  return bagOfMoney;
}

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;
}

//STORE
const {createStore, combineReducers} = Redux;
const ourDepartments = combineReducers({
  accounting: accounting,
  claimsHistory: claimsHistory,
  policies: policies
});

const store = createStore(ourDepartments);
console.log(store.getState());  // accounting 100, policies 0
const action = createPolicy('Alex', 20);
//take the action and send it to ALL reducers!
store.dispatch(action);
console.log(store.getState());  // accounting 120, policies 1
//can also be written like this
store.dispatch(createPolicy('Jim', 20));
store.dispatch(createPolicy('Bob', 20));

store.dispatch(createClaim('Alex', 20));
store.dispatch(createClaim('Jim', 20));

store.dispatch(deletePolicy('Bob', 20));

console.log(store.getState());

Add your comment