ReactJS REDUX Summary

Using stores and reducers

A simple example

import {createStore} from 'redux'

var reducer_1 = (state, action) => {
  console.log('reducer_0 was called with state', state, 'and action', action);
};
var store_1 = createStore(reducer_1); 

Real world example

import {createStore} from 'redux'

var reducer_1 = (state = {}, action) => {
  switch(action.type) {
  case '':
  return {
    ...state,
    message: action.value
  };
  default:
    return state;
  }
};
var store_1 = createStore(reducer_1); 

Combining reducers

import {combineReducers, createStore} from 'react';

var userReducer = (state = {}, action) => {
  switch(action) {
    case 'ADD_USER':
    return {
      //Return modified state
  };
  default:
    return state;
  }
};

var itemReducer = (state = [], action) => {
  switch(action) {
    case 'ADD_ITEM':
      return {
        //Return modified state
      };
    default:
      return state;
  }
};

var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
console.log(store.getState());
// {
// user: {}, // {} is the slice returned by our userReducer
// items: [] // [] is the slice returned by our itemsReducer
// } 

Dispatching an action

Flow of application: ActionCreator -> Action -> dispatcher -> reducer

Without action creator

import {combineReducers, createStore} from 'react';

var userReducer = (state = {}, action) => {
  switch(action) {
  case 'ADD_USER':
    return {
      //Return modified state
    };
    default:
      return state;
  }
};

var itemReducer = (state = [], action) => {
  switch(action) {
    case 'ADD_ITEM':
      return {
        //Return modified state
      };
      default:
        return state;
    }
};

var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
store.dispatch({type: 'ACTION'}); 

With Action Creator (Adopted from Flux)

import {combineReducers, createStore} from 'react';

var userReducer = (state = {}, action) => {
  switch(action) {
    case 'ADD_USER':
      return {
        //Return modified state
      };
    default:
      return state;
  }
};

var itemReducer = (state = [], action) => {
  switch(action) {
    case 'ADD_ITEM':
      return {
        //Return modified state
      };
    default:
      return state;
  }
};

var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
var addItemActionCreator = (name) => {
  return {
    item: name,
    type: 'ADD_ITEM'
  };
};
store.dispatch(addItemActionCreator); 

Async Action with Middleware

import {combineReducers, createStore, applyMiddleware} from 'react';

var userReducer = (state = {}, action) => {
  switch(action) {
    case 'ADD_USER':
      return {
        //Return modified state
      };
    default:
      return state;
  }
};

var itemReducer = (state = [], action) => {
  switch(action) {
    case 'ADD_ITEM':
      return {
        //Return modified state
      };
    default:
      return state;
    }
};

//Set the state after 2s
var addItemActionCreator = (name) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({
        item: name,
        type: 'ADD_ITEM'
      });
    }, 2000);
  };
};

// 1) The first level provide the dispatch function and a getState function (if your
// middleware or your action creator needs to read data from state) to the 2 other levels
// 2) The second level provide the next function that will allow you to explicitly hand over
// your transformed input to the next middleware or to Redux (so that Redux can finally call all reducers).
// 3) the third level provides the action received from the previous middleware or from your dispatch
// and can either trigger the next middleware (to let the action continue to flow) or process
// the action in any appropriate way.
var thunkMiddleware = ({dispatch, getState}) => {
  return (next) => {
    return (action) => {
      return typeof action === 'function' ? action(dispatch, getState) : next(action);
    }
  };
};

var reducers = combineReducers(user: userReducer, item: itemReducer);
var finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);
var store = finalCreateStore(reducers);
store.dispatch(addItemActionCreator); 

Subscribing to a Store

import {createStore} from 'redux'

var reducer_1 = (state = {}, action) => {
  switch(action.type) {
    case '':
      return {
        ...state,
        message: action.value
      };
    default:
      return state;
  }
};
var store_1 = createStore(reducer_1);
store_1.subscribe(() => {
  //Update react views
});