zoukankan      html  css  js  c++  java
  • 【巷子】---redux---【react】

    一、flux的缺陷

     

    因为dispatcher和Store可以有多个互相管理起来特别麻烦

     

    二、什么是redux

     

    其实redux就是Flux的一种进阶实现。它是一个应用数据流框架,主要作用应用状态的管理

     

    设计思想:

    (1)、web应用就是一个状态机,视图和状态一一对应

    (2)、所有的状态保存在一个对象里面

     

    三大原则:

    (1)、单一数据源

    整个store被储存在一个Object tree(对象树)中,并且这个Object tree只存在于唯一一个store中

    (2)、state是只读的

    唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象

     

    (3)、使用纯函数来修改(reducer)

    为了描述action如何改变state tree,你需要编写reducers

     

    三、redux适用的场景

     

    (1)、用户的使用方式复杂

    (2)、不同身份的用户有不同的使用方式(比如普通用户和管理员)

    (3)、多个用户之间可以协作

    (4)、与服务器大量交互,或者使用了WebSocket

    (5)、View要从多个来源获取数据

    当项目多交互、多数据源的时候必须用到redux

     

    从组件的角度来看什么时候用到redux

    (1)、某个组件的状态,需要共享

    (2)、某个状态需要在任何地方都可以拿到

    (3)、一个组件需要改变全局状态

    (4)、一个组件需要改变另一个组件的状态

     

    四、redux的工作流程

                         

    如果我们有一个组件,那么想要获取数据就需要从Store中获取数据,当组件需要改变Store数据的时候。需要创建一个Action,然后通过 dispatch(action) 传递给Store,然后Store把Action转发给Reducers. Reducers会拿到previousState(以前的state数据) 和action。然后将previousState和action进行结合做新的数据(store)修改。然后生成一个新的数据传递给Store 。Store发送改变那么View也会发生改变

     

     

    五、创建Store

     

     

     

    在Flux中Store是我们手动创建的,但是在redux中Store是redux提供的

     

    (1)、安装 yarn add redux --dev

     

    (2)、引入 import { createStore } from "redux";

     

    (3)、创建一个store = createStore(reducer)

     

    这样创建一个store我们没有办法进行存值,因此我们需要在createState中传递一个参数reducer这个参数就相当于Flux中的dispatcher遗留产物。这个遗留产物有一个规范就是内部必须是一个纯函数

     

    (4)、创建reducer.js

    这个函数里面有2个参数一个是state,另一个是action。

    state指的是store中的数据

    action指的是View修改数据的时候传递过来的action

     

    这个函数必须返回一个新的数据,而且还不能对老的数据进行修改(Reducer函数中不能改变state,必须返回一个全新的对象)

     

    我们可以先把这个state设置一个默认值defaultState。在defaultState这个对象中我们可以定义一些初始的数据

     

    官方解释reducer:

    Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如分页器

     

    (5)、导出Store

     

    导出的store这个对象中默认自带了一些方法

    (1)、dispatch:用来传递action

    (2)、getState:返回值就相当于this.state中的数据,里面存放着公共的数据

    (3)、replaceReducer:

    (4)、subscribe:监听数据的改变,必须传递一个函数

    (5)、Symbol(observable):

     

    六、创建Action

     

    七、将Action传递给store  

     

    方法:store.dispatch(action)

    当调用完这个方法后action会自动传递给reducer,这也是我们为什么在reducer中定义参数action    的原因。在reducer中我们会对action中的type进行比较,如果比较成功则返回一个新的state

     

    八、监听数据的改变

    store.subscribe()

     

     

    九、如何将reducer拆分成多个reducers

     

    (1)、引入combineReducers

    import { combineReducers, createStore } from "redux";

     

    (2)、合并多个reducers

    let reducer = combineReducers({ todoReducers, tabReducers })

     

    (3)、创建store

    let store = createStore(reducer)

     

    栗子:

     

    注意:在使用state的时候要注意使用的谁的state

     

    十、纯函数的概念

     

    同样的输入必须得到同样的输出

     

    约束:

    不得修改参数

    不能调用系统I/O的API

    不能调用Date.now()或者Math.random()等不纯的方法,因为每次得到值是不一样的结果 

     

    十一、redux与flux的区别

     

    Redux没有Dispatcher,且不支持多个store,Redux只有一个单一的store和一个根级的reducer函数。随着应有的不断变大,根级的reducer要拆分成多个小的reducers,分别独立的操作state的不同部分,而不是添加新的 stores。这就像一个 React 应用只有一个根级的组件,这个根组件又由很多小组件构成

  • 相关阅读:
    windows下安装mysql教程
    git基本操作
    JDK8,Optional
    重新安装MySQL 8出现的问题
    HTML5学习:缩略图
    HTML5学习:表格
    MySQL常用命令
    Django学习:创建admin后台管理站点
    Django学习:连接Mysql数据库
    Django学习:创建第一个app
  • 原文地址:https://www.cnblogs.com/nanianqiming/p/9873695.html
Copyright © 2011-2022 走看看