The Redux Cycle Simplified. (1/2)

A major part of learning React is also learning Redux. Redux makes managing state easier in complex applications by centralizing the information in one place. Before learning React with Redux it is important to know each part of the “Redux Cycle”.

• Actions Creators and Actions: Every Action Creator returns an action. Action Creators are functions that return the action object. Actions are objects where you store your information regarding data and state. The action object itself should have two keys, a type, and a payload. The type should be a custom named string that you can reference later. Best practices are to use all capital letters and underscores in the place of spaces. It is also best practice to use concise names. If you are creating a payment you would probably name the Type: “CREATE_PAYMENT”. The payload, on the other hand, returns another object that contains the data you want to manipulate.

const createPayment = (name, paymentAmount) => {
  return {
    type: "CREATE_PAYMENT",
    payload: {
      name: name,
      amount: paymentAmount
    }
  };
};

• Reducers and Dispatching: Reducers are functions designed to manipulate certain action’s payloads which will end up changing the state. Each reducer takes a first initial argument of your choosing. It is best practice to default it to a certain value as well. below, oldListOfPayments is expecting an array and funds is expecting a number. The second argument is the action itself. This is how you manipulate the payload. It is also important to note, that at the end of each if statement below, the entire data set is always returned whether it changes or not. this is to consolidate everything in one place.

const paymentHistory = (oldListOfPayments = [], action) => {
  if (action.type === "CREATE_PAYMENT") {
    return [...oldListOfPayments, action.payload];
  }
  return oldListOfPayments;
};
const bankAccounts = (funds = 100, action) => {
  if (action.type === "CREATE_PAYMENT") {
    return funds - action.payload.paymentAmount;
  } else if (action.type === "CREATE ACCOUNT") {
    return funds + action.payload.paymentAmount;
  }
  return funds;
};

• Dispatch: Dispatching is the MOST IMPORTANT PART. EVERY ACTION is sent(dispatched) to EVERY REDUCER. However, every reducer or section of a reducer doesn’t have to use every action. In the code above, both reducers are looking for the “CREATE_PAYMENT” type through a boolean. The action will run depending on if the boolean is true or false. After that, regardless of whether the payload changes, the data will be returned. The below code is what makes this possible.

const { createStore, combineReducers } = Redux;
const all = combineReducers({
  paymentHistory: paymentHistory,
  bankAccounts: bankAccounts
});
const store = createStore(all);
const action = createPayment('brian', 100)
store.dispatch(action)

The idea is to “combine reducers” and create a “store” that way when you “dispatch” an action, it goes through booleans for every reducer, applying itself to the correct ones and changing the state.