ReactJS

React Redux Steps: 1. Install Redux and React-Redux using the following command: Commmand: npm install --save redux react- 2. Create actions types in a seperate file (eg: actionTypes.js) export const ADD_INGREDIENT = 'ADD_INGREDIENT'; export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT'; export const UPDATE_INITIAL_INGREDIENTS = 'UPDATE_INITIAL_INGREDIENTS'; export const FETCH_INGREDIENTS_FAILED = 'FETCH_INGREDIENTS_FAILED'; 3. Create actions in a file (eg: action.js) import * as actionTypes from './actionsTypes'; export const addIngredient = (type) => { return {   type: actionTypes.ADD_INGREDIENT,   ingredientType: type }; }; export const removeIngredient = (type) => { return {   type: actionTypes.REMOVE_INGREDIENT,   ingredientType: type }; }; export const updateInitialIngredients = (ingredients) => { return {   type: actionTypes.UPDATE_INITIAL_INGREDIENTS, ...

Packages needed in React Apps: 1. For Ajax calls: axios Command: npm install --save axios 2. For Routing: react-router, react-router-dom Command: npm install --save react-router react-router-dom 3. For managing state centrally: redux Commmand: npm install --save redux react-redux 4. For Redux Dev Tools: install redux-devtool from Chrome Webstore import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; const logger = store => { return next => { return action => { console.log('[Middleware] Dispatching', action); const result = next(action); console.log('[Middleware] next state', store.getState()); return result; } } }; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, composeEnhancers(applyMiddleware(logger))); 4. Middleware for Redux (for making asyncrhonous calls): thunk ...