Understanding Redux

redux_intro.js

import Redux from 'redux';

// declare a function which takes state & action args (the reducer)
const reducer = (state = [], action) => {
  // Act based on specific action.type 
  if (action.type === 'split_string') {
    return action.payload.split(' ');
  }
  else if (action.type === 'add_char') {
    return [...state, '!'];
  }
  // Otherwise, just return the state arg.
  return state;
};

// Create a store 
const { createStore } = Redux;
const store = createStore( reducer );

// Get current state from created store
store.getState(); // return []

// Declare an action whose type is 'split_string' and data is 'hello redux'
const action = {
  type: 'split_string',
  payload: 'hello redux'
};

store.dispatch(action); // request the reducer to work against this action

store.getState(); // it should return ['hello', 'redux'] now

// create 2nd action
const action2 = {
  type: 'add_char',
  payload: '!'
};

// Dispatch the 2nd action
store.dispatch(action2);

// Get the state
store.getState(); // it should return ['hello', 'redux', '!']