zoukankan      html  css  js  c++  java
  • react redux 学习(二)

    经过上一章的环境搭建,接下里在本篇文章中去学习官网的一个例子。

    TodoList ;代办项的demo

    效果如图

    因为redux的state的是可以预测的。

    思路如下:

    1.demo中所涉及的数据(state)的管理 就是 Todolist 和 visibilityFilter

    2.理解下redux的三大要素:

       Action :是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

       Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。

          reducer是纯函数 ,下面是纯函数的要求

    • 修改传入参数;
    • 执行有副作用的操作,如 API 请求和路由跳转;
    • 调用非纯函数,如 Date.now() 或 Math.random()

         redux提供将多个reducer组合到一起 combineReducer({a,b,c})

       Store 就是把Reducers 和Action联系到一起的对象

          Store 有以下职责:

    3.根据UI来看 ,分成三个组件 AddTodo,VisibleTodolist,Footer 放在components路径下。与container不同的是 component下面的组件不需要跟dispatch打交道

    而是直接显示。

    4.开始写action

    addTodo:type:'addTodo ' 只需要text,id 
    toggleTodo  :type:'toggleTodo ' 只需要id 
    setVisibility :type:'setVisibility ' 只需要filter
    //action.js
    let nextTodoId = 0
    export const addTodo = function(text){
        return {
            type:"ADD_TODO",
            id:nextTodoId++,
            text
        }
    }
    
    export const toggleTodo = function(id){
        return {
            type:"TOGGLE_TODO",
            id
        }
    }
    
    export const setVisibility = function(filter){
        return {
            type:"SET_VISIBILITY_FILTER",
            filter
        }
    }
    View Code

    5.开始写reducer

      分为todo.js 和 visibilityFilter.js 这里用到了一些es6d的语法 map assign 等 reducer是为了返回新的state ,很像vuex里面的mutation

    const todo = function (state = [], action) {
        switch (action.type) {
            case 'ADD_TODO':
                return [
                    ...state, {
                        text: action.text,
                        id: action.id,
                        completed: false
                    }
                ]
            case 'TOGGLE_TODO':
                return state.map(todo => {
                    return todo.id === action.id
                        ? (Object.assign({}, todo, {
                            completed: !todo.completed
                        }))
                        : todo
                })
    
            default:
                return state
        }
    }
    
    
    export default todo
    View Code
    const visibilityFilter=function(state='SHOW_ALL',action){
        switch (action.type) {
            case 'SET_VISIBILITY_FILTER':
            return action.filter
        
            default:
               return state
        }
    }
    
    export default visibilityFilter
    View Code

    6.开始写 components 和 containers  里组件

       VisibleTodoList =>TodoList=>Todo

       Footer => FooterLink =>Link

       AddTodo

  • 相关阅读:
    今天上传公司服务器出现的.net framework版本错误问题
    浮动后父容器高度自适应
    asp net 编程问题 实现下一篇 和上一篇效果
    注意:"AspNetPager”的控件“AspNetPager1”必须放在具有 runat=server 的窗体标记内
    SqlDbHelper备份,做项目时方便应用(目前不太全,把自己项目中的逐渐转移过来)
    域名状态,域名查询看是否被注册
    关于403 由于扩展配置问题而无法提供您请求的页面的问题
    让qq图标在自己的网站上显示方法
    Tomcat基于虚拟路径的发布和web.xml配置
    Tomcat虚拟目录配置方法及原理
  • 原文地址:https://www.cnblogs.com/cylblogs/p/9590659.html
Copyright © 2011-2022 走看看