只要用到react的项目都会用到redux
- redux对于JavaScript应用而言是一个可预测状态的容器。是一个应用数据流框架,不同于传统的像angular那样的库或者框架。
- 最主要的就是用作应用状态的管理。
- redux用一个单独的常量状态树(对象)保存一整个应用的状态,这个对象不能直接被改变,当一些数据变化了,一个新的对象就会被创建(使用action和reducers)
- redux是一个范用的状态管理框架
- 主要解决了组件间状态共享的问题,原理是集中式管理
优点:流程规范,减少手动编码量,提高代码效率。
缺点:组件相关数据更新时,组件需要重新渲染,可能会影响效率,需要写复杂的shouldComponentUpdate进行判断。
三个核心api:Action、Reducer、Store。(可以加一个View)
store 仓库
提供维持应用的state;
提供getState() 方法获取state;
提供dispatch(action)方法更新state;
通过subscribe(listener)注册监听器。
action
发送的对象必须有type属性
reducer 核心
纯函数,使用switch方法进行判断,给store上的Action发送过来的type类型做逻辑上的处理。
不能改写参数,不能调用系统I/O的API,不能调用不纯的方法(Math.random()每次得到不同的数据)。
todolist
把获取的数据给action对象上的某个方法,参数msg为该数据
var Action ={
addItem(msg){
return{
type:"ADD",
text:msg
}
}
}
调用为: Action.addItem(this.refs.ipt.value)
下面Store来接收Action
Store.dispatch(Action.addItem(this.refs.ipt.value))
Store.js中
import {createStore} from 'redux' //redux的核心api,创建Store
import Reducer from './Reducer' //Reducer是一个纯函数
var Store= createStore(Reducer)
export default Store;
Reducer.js 中,两个参数
state初始状态,状态不可改变,处理完后返回一个新的状态树。
action接过来的action对象
var Reducer=((state=[],action)=>{
switch (action.type){
case "ADD":
let arr=[...state]
arr.push(action.text)
return arr;
default:
return state;
}
})
export default Reducer;
视图中想要更新
通过状态state,调用Store中的getState()方法,获取Store的所有数据
在componentDidMount()中调用Store的subscribe方法,监听change
this.state={ list:Store.getState() }
componentDidMount(){
Store.subscribe(this.changeItem) //注意this指向
}
最后展示,可以使用map方法
reducer拆分: 使用combineReducers
import {combineReducers} from 'redux'
import List from './List' //新建List.js把逻辑处理放在List里,list里state是数组,可以新建其他类型,‘’,{}...
var Reducer=combineReducers({
list:List
})
export default Reducer;
获取数据改为list:Store.getState().list
Redux异步流
中间件Middleware
可以使用的插件:redux-thunk、redux-saga、redux-promise
使用方法:
- 引入:import thunk from ‘redux-thunk’;
- 加入中间件:
const store=createStore(Reducer,applyMiddleware(thunk))
- 在store接收数据的时候做一个延时操作
Store.dispatch(()=>{
setTimeout()=>{
dispatch(Action.addItem(this.refs.name.value)
}
})