zoukankan      html  css  js  c++  java
  • redux学习与使用

    Redux:

    主要概念Action,reducer,store,state

    原理:dispatch ({ type:action, preload: { val } } ) --->reducer(修改state)

    store:

    Store 就是把它们(state,action,reducer)联系到一起的对象

    state:

    在 Redux 应用中,所有的 state 都被保存在一个单一对象中

    action:

    通过action修改state,action就是一个普通js对象,给出一个action实例:

    { type: 'ADD_TODO', text: 'Go to swimming pool' }
    { type: 'TOGGLE_TODO', index: 1 }
    { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

    type 字段来表示将要执行的动作, text字段是传递的值

    • 强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么,

    • 为了把 action 和 state 串起来,开发一些函数,这就是 reducer

    • reducer 只是一个接收 state 和 action,并返回新的 state 的函数

    reducer:
    • 不修改原来的state, 使用 Object.assign({}, obj1, obj2) 新建了一个副本,或者es6对象展开运算符的使用,{...state, ...newState}达到相同目的

    • 在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state

    function todoApp(state = initialState, action) {
    switch (action.type) {
      case SET_VISIBILITY_FILTER:
        return Object.assign({}, state, {
          visibilityFilter: action.filter
        })
      default:
        return state
    }
    }


    学习书
    http://caibaojian.com/react/component-lifecycle.html

       http://huziketang.mangojuice.top/books/react/lesson2

     

     

  • 相关阅读:
    闰年的定义
    Sublime Text 3
    维特比算法(Viterbi)
    索引
    倒排索引
    URL过滤
    判断一个元素是否在集合中
    布隆过滤器
    jsp九大内置对象
    jsp九大内置对象和其作用详解
  • 原文地址:https://www.cnblogs.com/evaling/p/10318242.html
Copyright © 2011-2022 走看看