REACT Extract State Logic to Redux


Thu Nov 12 2020 23:28:31 GMT+0000 (Coordinated Universal Time)

Saved by @bifrost #react.js

// define ADD, addMessage(), messageReducer(), and store here:
const ADD = "ADD";
const addMessage = message => {
  return {
    type: ADD,

// Use ES6 default paramter to give the 'previousState' parameter an initial value.
const messageReducer = (previousState = [], action) => {
  // Use switch statement to lay out the reducer logic in response to different action type
  switch (action.type) {
    case ADD:
      // Use ES6 spread operator to return a new array where the new message is added to previousState
      return [...previousState, action.message];

      // A default case to fall back on in case if the update to Redux store is not for this specific state.
      return previousState;

const store = Redux.createStore(messageReducer);

add new messages from the user to an unordered list. Redux way !