redux【react】
首先介绍一下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
(1)、安装 yarn add redux --dev
(2)、引入 import { createStore } from "redux";
(3)、创建一个store = createStore(reducer)
应用createStore创建store createStore中必须传递一个reducer
import {createStore} from "redux"; import reducer from "./reducer"; const store = createStore(reducer);
六、创建reducer.js
const defaultState={} export default (state=defaultState,action)=>{ return state; }
这个函数里面有2个参数一个是state,另一个是action。
state指的是store中的数据
action指的是View修改数据的时候传递过来的action
这个函数必须返回一个新的数据,而且还不能对老的数据进行修改(Reducer函数中不能改变state,必须返回一个全新的对象)
我们可以先把这个state设置一个默认值defaultState。在defaultState这个对象中我们可以定义一些初始的数据
七、导出Store
import {createStore} from "redux"; import reducer from "./reducer"; const store = createStore(reducer); export default store;
导出的store这个对象中默认自带了一些方法
(1)、dispatch:用来传递action
(2)、getState:返回值就相当于this.state中的数据,里面存放着公共的数据
(3)、replaceReducer:
(4)、subscribe:监听数据的改变,必须传递一个函数
(5)、Symbol(observable):
八、创建action
let action={ type:“NUM__ADD” }
九、将Action传递给store
store.dispatch(action)
十、监听数据的改变
store.subscribe()
实例: constructor(){ super(); store.subscribe(this.handUPdate.bind(this)) } handleUpdate(){ this.setState(store.getState()) }
十一、如何将reducer拆分成多个reducers
(1)、引入combineReducers
import { combineReducers, createStore } from "redux";
(2)、合并多个reducers
let reducer = combineReducers({ todoReducers, tabReducers })
(3)、创建store
let store = createStore(reducer)
1、reducer.js const defaultState={ n:10 } export default (state=defaultState,action)=>{ return state; } 2、inforeducer.js const defaultState={ name:"张三",
n:20 } export default (state=defaultState,action)=>{ return state; } 3、store index.js import {createStore,combineReducers} from “redux” import reducer from "./reducers/reducer" import inforeducer from "./reducers/reducer" let reducer = combineReducers ({ reducer inforeducer }) let store = createStore(reducer) export default store;
4、APP.js
let {n} =this.state.reducer
注意:在使用state的时候要注意使用的谁的state
总结一下:
redux数据传递流程
1、通过store.getState获取到store中的数据,在页面进行渲染
2、当组件中需要修改数据的时候通过调用store中的dispatch方法来将acton传递给store 但是store偷偷给了reducer
3、reducer的函数中接收到action,做业务逻辑处理 处理完毕后返回新的state
4、时间订阅 通过store中的subscribe方法来做事件的订阅,当数据发生改变的时候组件中的数据更新