码迷,mamicode.com
首页 > 其他好文 > 详细

redux - update

时间:2018-06-25 15:20:03      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:object   OLE   code   port   S3   opened   gre   -shared   color   

1. initial state

技术分享图片
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"
    }
  ]
}
db.json

 

2. reducer

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

 

3. action

1) declare

const addRecipe_action = (name) => ({
    type:‘ADD_RECIPE‘, 
    name
})

2) dispatch

store.dispatch(addRecipe_action(‘Xiaobin‘));

 

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})
            });
            
        case ‘ADD_INGREDIENT‘:
            return Object.assign(
                {}, state, {
                    ingredients: state.ingredients.concat({
                        name : action.name,
                        quantity: action.quantity,
                        measure: action.measure,
                        recipe: action.recipe
                        })
            });
            
    }
    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 addRecipe_action = (name) => ({
    type:‘ADD_RECIPE‘, 
    name
})

const store = createStore(reducer, initialState);

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

store.dispatch(addRecipe_action(‘Xiaobin‘));

store.dispatch({type:‘ADD_INGREDIENT‘, name: ‘Eggs‘, quantity: 2, measure: ‘large‘, recipe: ‘xiaobin‘});

console.log(store.getState());

 

redux - update

标签:object   OLE   code   port   S3   opened   gre   -shared   color   

原文地址:https://www.cnblogs.com/xiaobin-hlj80/p/9223838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!