文章借鉴于:Redux入门教程
一.什么是Redux?
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。他可以弥补react两个不足之处,代码的结构和组件之间的通信。Redux有三大原则,单一的数据源,state是只读的,使用纯函数来执行修改。
二.什么情况下使用Redux?
- 某个组件的状态需要共享
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
- 不同身份的用户有不同的渲染
- 多个用户之间可以相互协作
- 与服务器大量交互,或者使用了WebSocket
- View要从多个来源获取数据
以上情况当你使用Redux时,会发现它的妙处。
三.Redux中的API
3.1 Store
当你使用Redux时,第一步需要创建一个Store仓库,Store像是一个容器。整个项目中只有一个Store
import { createStore } from 'redux';
const store = createStore(reducer);
exprot default store
以上代码中创建了一个createStore实例,返回的是一个对象
3.2 State
State是Store仓库中的快照数据,你可以通过store.getState()获取到。
import { createStore } from 'redux';
const store = createStore(reducer);
const state = store.getState();
你需要知道Redux的设计思路,web应用是一个状态机,视图与数据是一一对应的,所以一个State对应一个View。只要State相同,View就相同
3.3 Action Creator
你可以在组件中创建一个actionCreator.js文件,此文件专门用来添加Action,Action 是一个对象。其中的type属性是必须的,表示 Action 的名称,此对象会在组件中通过store.dispatch(actionCreator.incAction§)调用传给仓库用以改变state的数据
export default {
incAction(p){
return {
type:'INCREMENT', //type的值必须要大写
p
}
}
}
3.4 store.dispatch()
上文提到通过store.dispatch可以在View中发出Action,且这种方式是唯一发出Action的方法。
import { createStore } from 'redux';
import actionCreator from './actionCreator'
const store = createStore(reduce);
//此处表示在组件中将数据传给store仓库
store.dispatch( actionCreator.incAction(p) )
3.5 Reducer
在上文都提到了一段代码:
import { createStore } from 'redux';
const store = createStore(reducer)
在createStore函数中的reducer是什么呢?
他其实相当于State与View的加工厂,你可以通过Reducer将Store收到的Action经过加工,返回一个新的State返回给View。并且Reducer是一个纯函数(只要同样的输入,必定得到同样的输出),这就可以保证同样的State,必定得到同样的View。但也正因为这样,Reducer不能改变State,必须返回一个全新的对象
const initalState = {
n:1
}
const reducer = (state=initalState,action){
switch(action.type){
case 'ADD':
let newState = {...state}
newState.n += 1
return newState
default:
return state
}
}
export default reducer
上述代码可以看出,Reducer将store接收到的Action加工,返回了一个新的State,并且Action中的type决定了Reducer中的行为。
3.6 store.subscribe()
既然能在View中将参数通过dispatch的方式改变数据,那么怎么在View中获取最新的State数据呢,这时就需要用到store.subscribe()。一旦State发生变化,就会自动执行这个函数,从而在View中获取最新的State。
import { createStore } from 'redux'
const store = createStore(reducer);
export default class One extends Component {
constructor(props) {
super(props)
this.state = {
b: store.getState().b
}
store.subscribe(this.change)
}
//数据改变
change = () => {
this.setState({
b: store.getState().b
})
}
下面通过一张Redux单项数据流来解释Redux工作流程
首先用户发出Action,然后Store自动调用Reducer,并且传入两个参数:当前State 和收到的 Action。 Reducer 会返回新的 State 。State 一旦有变化,Store 就会调用监听函数,从而获取新的数据重新渲染View