Redux-学习笔记
安装Redux
redux需要安装以下依赖:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
@connect
装饰器报错处理
因为用到了es6/7的语法,需要安装babel转码
npm run eject //解除封装
cnpm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install @babel/plugin-proposal-decorators --save-dev
在package.json中添加插件支持ES7:
"babel": {
"presets": [
"react-app"
],
"plugins": [
["@babel/plugin-proposal-decorators",{"legacy": true}]
]
},
Redux简介(为什么要用Redux?)
先来看看React里面的数据是怎样传递的(下图中并不是说this.state只能在“团长”处,这里只是为了简便,所以才这样写,其实营长,连长都可以有自己的this.state):
React数据流:
- 可以看到,一般都是团长等高级干部商量好对策之后(
this.state
设置好) - 把命令一层层的传递下去执行(
this.props
渲染) - 要是哪里发生了什么新的敌情了(想更新页面内容了)
- 就得一层层往上报告(通过回调一层层把数据传上去),此过程也必须一层层往上传递,不能越级,下面有解释
- 团长做出决断后再发布命令传下去执行(通过
setState
修改数据并重新渲染)
这个过程是不能越级的,比如说你一连长发现了敌情就不能直接报告团长,而必须先报告给一营长,一营长再报告给团长,这里层级还不是特别深,你再来个排长,班长什么的,按照这种模式,等团长知道敌情,敌人都打到家门口啦,又或者说一连长想找三连长喝个酒,还得先把这个消息传给营长,再传给团长,再传给二营长再传给三连长,这……
Redux横空出世
所以说层级不深,组价之间也没有什么公用数据的时候,用React自身的setState其实也可以了,可是嵌套一深,或者组件有一些公用数据时就比较麻烦了,于是就有了redux(其实之前还有个flux),回到这个例子就是,他们在整个团之外又建立了一个通讯班(Redux):
看起来就像下面这样:
这里只是一个很简单的示意图,实际使用并非如此,这个图示为了让大家理解React中的数据和Redux中的数据是独立的,并没有任何关系。
Redux
现在让我们抛开战斗编制(React),单看通讯班(Redux)。
其实网上讲Redux的教程非常多,这里就简单说一下:
store
store
:首先要创建一个对象store,这个对象有各种方法,用来让外界获取Redux的数据(store.getState
),或者让外界来修改Redux中的数据(store.dispatch
)
import { createStore } from 'redux';
const store = createStore(reducer);
action
:描述我要干啥,一般是一个对象的形式,其中有一个type字段是必须要有的,比如:{ type:‘请求增援’ }
,还可以带点数据{ type:‘请求增援’,gun:"100" }
reducer
reducer
:撸开袖子真刀实枪的就去干了,比如一连长要求增援,增援要求是100杆枪,团长马上就给你加了100杆枪送了过去。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case '请求增援':
return state + action.gun;
default:
return state;
}
};
action
和reducer
也可以想象成产品经理
和程序员
的关系。
产品经理:“我要一个按钮,圆角的”
程序员:“嗯,做好了”
产品经理:“换个颜色吧,红色”
程序员:“ok,换好了”
差不多就是这样,产品经理并不操心具体怎么实现的,他只说他想要干什么(type
),然后再提点实现的要求(各种其他的数据),程序员就去具体实现(reducer,修改state,然后返回一个全新的state
,这里注意我们并没有直接返回原来的state,我们返回的是一个全新的state对象,因为reducer
函数是一个没有副作用的纯函数)
那怎么去触发这个操作(action)呢,就好比说我一连长发现敌情了,我怎么报告给通讯班,让通讯班来处理呢?
就是上面提到过的store.dispatch
,不过还要加一个参数,那就是action
store.dispatch({ type:‘请求增援’,gun:"100" })
这样就可以触发action,执行reducer,得到一个全新的state。
小例子:
<!DOCTYPE html>
<html>
<head>
<title>REDUX</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
Clicked: <span id="value">0</span> times
<button id="add">+</button>
<button id="del">-</button>
</p>
</div>
<script>
window.onload = function(){
const action = ()=>{
return {
type:'DEL'
}
}
const reducer = (state = 0, action) => { //reducer
switch (action.type) {
case 'ADD':
return state + 1;
case 'DEL':
return state -1
}
};
const store =Redux.createStore(reducer); //创建store对象
document.getElementById("add").onclick= function(){
store.dispatch({ type:'ADD' }) //触发action
};
document.getElementById("del").onclick= function(){
store.dispatch(action()) //触发action
};
function render(){
document.getElementById("value").innerHTML = store.getState(); //获取store中的state
}
store.subscribe(render) //监听state变化执行render
}
</script>
</body>
</html>
Redux和React
到此为止,Redux自己就折腾完了,那么Redux自己的数据并没有用,它要把数据交给React用才行,接下来讲一讲怎么把数据交给React来用。
上面我们创建了一个对象store,我们要把这个store对象作为props传给React,那React就可以用了。
这个store只能有一个,也就只能创建一次,也就是说你必须在最顶层处创建一个store对象,然后再一层层的传递下去,才能让所有的组件都能获得这个store对象,调用它的方法。
获取Redux中的数据
比如说我要在render函数中显示Redux的数据,那么我就可以先获取它的数据:
store.getState()
然后把这个数据当做props渲染到组件中去就行了。
更新Redux中的数据
如果你要修改它的数据,那就在JSX中调用
store.dispatch( { type:‘请求增援’,gun:"100" } )
响应Redux中的变化
那么这里问题又来了,你调用了store.dispatch之后Redux中的数据确实改变了,可是React并没有什么变化啊。也就是说React中的render函数并没有被触发呀是不是,就好像React中你直接修改React中的state是没有用的而必须调用React的setState才能重新渲染。
因此,为了让Redux的数据一改变我们就重新渲染,Redux自己提供了一个方法叫做
store.subscribe(render)
这个函数可以监听Redux中state的变化,一旦Redux中的state发生了变化,render函数就会被调用,页面就会被重新渲染。
上面这个过程就是手动调用的过程,但这样调用有点麻烦,因为要让所有的子组件都能应用store中的数据,那么所有的组件就都要把store当做props传进来,这也太麻烦了。
还是那之前那个例子来说,你一连长发现了敌情,是不用层层上报了,可以直接报告给通讯班,通讯班再生成新的命令,可问题是,你从下往上打报告是简单了,可是从上往下发布命令仍然是一层层的传递的呀。
就好比说,一连长发现了敌情,报告上去,通讯班做出决定让三连长带人去打,通讯班还是得通过团长–营长–连长这条路去一层层发布命令,能不能让通讯班直接就通知三连长呢,当然是有的,这就是我们的React-redux库
React-redux
这个是需要你自己去用npm额外安装的。
使用这个方法之后,我们就不需要一层层往下发布命令了
在React-redux中有两个比较关键的概念:Provider
和connect
方法。
一般我们都将顶层组件包裹在Provider组件之中,这样的话,所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去
<Provider store = {store}>
<团长/>
<Provider>
这个组件的目的是让所有组件都能够访问到Redux中的数据。
redux-actions使用
redux-actions有两大法宝createAction
和handleActions
createAction
原来创建action:
const startAction = () => ({ type: START });
使用redux-actions创建action:
import { createAction } from 'redux-actions';
const startAction = createAction(START);
handleActions
原来reducer操作state写法要使用switch或if else来匹配:
function timer(state = defaultState, action) {
switch (action.type) {
case START:
return { ...state, runStatus: true };
case STOP:
return { ...state, runStatus: false };
case RESET:
return { ...state, seconds: 0 };
case RUN_TIMER:
return { ...state, seconds: state.seconds + 1 };
default:
return state;
}
}
使用redux-actions``reducer操作state:
const timer = handleActions({
START: (state, action) => ({ ...state, runStatus: true }),
STOP: (state, action) => ({ ...state, runStatus: false }),
RESET: (state, action) => ({ ...state, seconds: 0 }),
RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
}, defaultState);
项目打包
npm run build
打包成功后,新增build文件
如何访问?
输入npm install -g serve
或者 cnpm install -g serve
安装服务,或者使用nginx,可见https://blog.csdn.net/hhhmonkey/article/details/119333875类似
进入build目录输入 serve
在浏览器输入 http://localhost:5000