redux - mini

1. include createStore

import { createStore } from 'redux'

2. Establish reducer

const reducerName = (state, action) => {
    state;
}

3. invoke createStore()

const store = createStore(reducerName);

code:

import { createStore } from 'redux';

const reducer = (state, action) => {
    switch (action.type) {
        case 'ADD_RECIPE':
            return Object.assign(
                {}, state, {
                    recipes: state.recipes.concat({name : action.name})
            });
            
    }
    return state;
}

// https://s3.amazonaws.com/500tech-shared/db.json
 const initialState = { 
  "recipes": [
    {
      "name": "Omelette"
    },
    {
      "name": "Waffle"
    }
  ],
  "ingredients": [
    {
      "name": "Eggs",
      "quantity": 2,
      "measure": "large",
      "recipe": "Omelette"
    },
    {
      "name": "Eggs",
      "quantity": 1,
      "measure": "large",
      "recipe": "Waffle"
    },
    {
      "name": "Milk",
      "quantity": 1,
      "measure": "cups",
      "recipe": "Waffle"
    },
    {
      "name": "Sugar",
      "quantity": 2,
      "measure": "tbsp",
      "recipe": "Waffle"
    }
  ]
}

const store = createStore(reducer, initialState);

console.log(store.getState());
store.subscribe(()=>(console.log("store change")));

store.dispatch({type:'ADD_RECIPE', name: 'xiaobin'});

console.log(store.getState());

index.js

db.json

{
  "recipes": [
    {
      "name": "Omelette"
    },
    {
      "name": "Waffle"
    }
  ],
  "ingredients": [
    {
      "name": "Eggs",
      "quantity": 2,
      "measure": "large",
      "recipe": "Omelette"
    },
    {
      "name": "Eggs",
      "quantity": 1,
      "measure": "large",
      "recipe": "Waffle"
    },
    {
      "name": "Milk",
      "quantity": 1,
      "measure": "cups",
      "recipe": "Waffle"
    },
    {
      "name": "Sugar",
      "quantity": 2,
      "measure": "tbsp",
      "recipe": "Waffle"
    }
  ]
}

db.json