【凡尘】---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 应用只有一个根级的组件,这个根组件又由很多小组件构成

原文地址:https://www.cnblogs.com/nanianqiming/p/9873695.html

时间: 2024-11-13 00:04:07

【凡尘】---redux---【react】的相关文章

我本微末凡尘,却也心向天空_慕课手记

有时候总是想写点什么,但是双手放在键盘上的时候,又不知道从何说起,我有时候总是在想,我们人来到这个世界上,究竟是为了什么,为了一天天的工作?为了找一个爱自己的伴侣?这个问题曾经困扰了我很久. 记得在高中的时候,我是班上学习最差劲的几个学生,喝酒打架.FQ上网,不知道写过多少的检查,逢年过节父母肯定不敢跟别人提起我的成绩,人生的前二十年,从来没有让自己的父母骄傲过.直到高三那一年,发生的一件事改变了我的人生轨迹,那是2011年,深圳举办大学生运动会,我们学校要选一些保安过去,一个月一千五百块钱,我

localstorage - HTML 5 Web 存储总结---【凡尘】

001.localStorage概念 在html5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储,解决了cookie存储空间不足的问题(cookie中每条cookie存储空间为4K),localStorage支持5M大小. 002.localStorage的局限 1.浏览器的大小不统一,并且IE8以上版本才支持localStorage这个属性 2.localStorgae的值类型限定为String类型,我们需要JSON.parse() JSON.Stringify(

Redux+React Router+Node.js全栈开发

详情请交流  QQ  709639943 01.Java深入微服务原理改造房产销售平台 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Redux+React Router+Node.js全栈开发 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring

Flux --> Redux --> Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

[Redux] React Todo List Example (Toggling a Todo)

/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( state, action ) => { switch ( action.type ) { case 'ADD_TODO': return { id: action.id, text: action.text, completed: false }; case 'TOGGLE_TODO': if ( s

[Redux] React Todo List Example (Adding a Todo)

Learn how to create a React todo list application using the reducers we wrote before. /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( state, action ) => { switch ( action.type ) { case 'ADD_TODO': ret

【凡尘】---react-redux---【react】

一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,connect的意思就是将两种组件连起来 参考文章:https://github.com/reduxjs/react-redux 二.react-redux的基本用法 (1).引入 import {Provider} from "react-redux"; 在根组件外层嵌套一个Provider. 

【凡尘】---middleware---redux-promise-middleware---【凡尘】

一.Middleware的由来 单一的state是存储在store中,当要对state进行更新的时候,首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知,用来描述发生了什么(比如:增加一个Todo),然后reducer会根据action来进行对state更新,这样就可以根据新的state去渲染View 当然上面仅仅是发生同步Action的情况下,如果是Action是异步的(例如从服务器获取数据),那么情况就有所不同了,必须要借助Redux的中间件Mi

凡尘:关于Apply、call、bind的详解

call方法: 语法:call(thisObj,'',''........) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明:call方法可以用来代替另一个对象调用一个方法.call方法可将一个函数的对象上下文初始的上下文改变为由thisObj指定的新对象,如果没有提供thisObj参数,那么global对象被用做thisObj apply方法: 语法:apply(thisObj,['','',''....]) 定义:应用某一个对象的方法,用另一个对象替换当前对象 如果argArr