脚本宝典收集整理的这篇文章主要介绍了React 教程第十一篇 —— Redux 简介和简单实现,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。@H_126_0@
前端框架的组件式开发永远有一道鸿沟——跨组件通信。我在 Vue 教程中有提到过,如果对跨组件通信不明白的可先跳过去看看。
React 不同与双向数据绑定框架,它是单向数据流,所以每次更新都得调用setState
,所以在跨组件通信中会比较迂回。还有就是 React 没有逻辑分层,在开发过程中,逻辑分层是很重要的。
Redux 实现了跨组件通信和逻辑分层的好处,所以在 React 中使用 Redux 更配。
为了说明问题,先来一个公共对象实现跨组件通信。当然这个也是 flux 的实现原理。
export default {
increment(){
return {
tyPE: "+"
}
},
decrement(){
return {
type: '-'
}
}
}
export default (state = 0, action) => {
switch(action.type){
case '+':
return state + 1;
case '-':
return state - 1;
default:
return state;
}
}
import React, {Component} From 'react'
import {createstore} from 'redux'
import Actions from './actions'
import Reducer from './reducer'
const store = createStore(Reducer);
export default class Component1 extends Component{
constructor(PRops){
super(props);
this.state = {count: 0}
}
increment = () => {
store.dispatch(Actions.increment());
this.setState({
count: store.getState()
})
}
render(){
return (
<div>
<h3>component-cp1-{this.state.count}</h3>
<input type="button" value="increment" onClick={this.increment}/>
</div>
)
}
}
Actions 层
store.dispatch(Actions.increment());
function
且必须返回有type
属性的对象store
进行派发。Reducer 层
state
,另一个为action
return
的结果可以用store.getState()
来接收Store 层
redux
的一个方法,接受reducer
,返回一个对象store
store
的方法dispath
用于派发action
dispath
派发的action
会触发reducer
View 层
以上是脚本宝典为你收集整理的React 教程第十一篇 —— Redux 简介和简单实现全部内容,希望文章能够帮你解决React 教程第十一篇 —— Redux 简介和简单实现所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。