Redux cycle

redux.js

console.clear();
    
    // Creating action creators for 3 actions: creating a policy, creating a claim, deleting a policy
    
    // action creator: people dropping off a form
    const createPolicy = (name, amount) => {
      return { // action, a form in our analogy
        type: 'CREATE_POLICY',
        payload: {
          name: name,
          amount: amount
        }
      };
    };
    
    const deletePolicy = (name, amount) => {
      return { // action, a form in our analogy
        type: 'DELETE_POLICY',
        payload: {
          name: name,
          amount: amount
        }
      };
    };
    
    const createClaim = (name, amountOfMoneyToCollect) => {
      return { // action, a form in our analogy
        type: 'CREATE_CLAIM',
        payload: {
          name: name,
          amountOfMoneyToCollect: amountOfMoneyToCollect
        }
      };
    };
    
    // end of action creators
    
    // Reducers (our departments that handle forms)
    // the goal of a reducer is to modify some existing data based on an action
    // oldListOfClaims is getting the old store from state
    // action is the form to process
    const claimsHistory = (oldListOfClaims = [], action) => {
      if(action.type === 'CREATE_CLAIM'){
        // we care about this action (from)
        return [...oldListOfClaims, action.payload];
        // we could have done oldListOfCLaims.push(action.payload)
        // the difference is that we want to create a new list
        // we want to avoid modifying existing data structors inside of reducers
      }
      
      // we don't care about this action
      return oldListOfClaims;
    };
    
    const accounting = (bagOfMoney = 100, action) => {
      if(action.type === 'CREATE_CLAIM'){
        // we care about this action (from)
        // pay person
        return bagOfMoney - action.payload.amountOfMoneyToCollect;
      } else if(action.type == 'CREATE_POLICY'){
        // collect money
        return bagOfMoney + action.payload.amount;
      }
      
      // we don't care about this action
      return bagOfMoney;
    };
    
    const policies = (listOfPolicies = [], action) => {
      if(action.type === 'CREATE_POLICY'){
        return [...listOfPolicies, action.payload.name]
      } else if (action.type === 'DELETE_POLICY'){
        // filter helper returns new array
        return listOfPolicies.filter(name => name === action.payload.name);
      }
      
      return listOfPolicies;
    }
    
    // redux store
    const {createStore, combineReducers} = Redux;
    
    //combintation of reducers
    const ourDepartments = combineReducers({
    // these are only to name what these things are refered to in state
      accounting: accounting,
      claimsHistory: claimsHistory,
      policies: policies
    });
    
    //creating store
    const store = createStore(ourDepartments);
    
    // value of the store with all the data from reducers
    //store;
    
    // DISPATCH is built in to redux, so we don't have to write that
    
    // when we give an action to dispatch, it is given to the reducers to resolve that action
    // modifies state
    store.dispatch(createPolicy('bob', 30));
    store.dispatch(createPolicy('adam', 30));
    store.dispatch(createPolicy('kevin', 40));
    
    store.dispatch(createClaim('bob', 120));
    
    
    // see all of state (see reduxFinalState.json)
    console.log(store.getState());

reduxFinalState.json

{
	"accounting": 80,
	"claimsHistory": [
		{
			"length": 1
		},
		{
			"0": {
				"name": "bob",
				"amountOfMoneyToCollect": 120
			}
		}
	],
	"policies": [
		{
			"length": 3
		},
		{
			"0": "bob"
		},
		{
			"1": "adam"
		},
		{
			"2": "kevin"
		}
	]
}