手挽手带你学React入门四档,用人话教你react-redux,理解redux架构,以及运用在react中。学完这一章,你就可以开始自己的react项目了。
视频教程
上一篇我们自己实现了Redux,这一篇我们来看看如何去实现一个react-redux
开始之前
本文需要用到的知识
首先你要会React的基础(这是废话)
高阶组件
React context
满足这三项我们开始往下看。
react结合redux
搭建基础环境
我们上一章讲过了redux的原理,内部是有一个store的,store只有dispatch才可以控制它变化。还有在文章一开始我们讲了React context 可以跨组件传递数据,那么到现在你想到把我们的store挂到最外层一个组件的context上了吗?话不多说 开始!
我们先修改一下我们的react文件(注意不是redux.html这个文件了)
// App.js
import React,{Component} from 'react'
import PropTypes from 'prop-types' //引入
export default class App extends Component {
constructor(){
super()
this.state={
}
}
componentWillMount(){
// console.log(hashHistory)
}
render() {
return (
<div>
<Children />
<ChildrenTwo />
</div>
)
}
}
// 为了展示效果定义子组件一
class Children extends Component{
constructor(){
super()
this.state={
}
}
render(){
return(
<div>
<h1>我是脑袋</h1>
<h2>我是身体</h2>
</div>
)
}
}
// 为了展示效果定义子组件二 ChildrenTwo 是 Children的子组件 但是却通过context拿到了App组件拿过来的值 (越级传递)
class ChildrenTwo extends Component{
constructor(){
super()
this.state={
}
}
render(){
return(
<div>
<button>变字</button>
<button>变色</button>
</div>
)
}
}
创建基本store
现在我们做好了示例文件的基础模板了,然后我们需要创建一个store.js
// store.js
// 这是我们的 reducer
const changeDom = (state,action) => {
if(!state)return{
text : "我是实例文字",
color : 'red'
}
switch(action.type){
case "CHANGE_TEXT":
return{
...state,
text:action.text
}
case "CHANGE_COLOR":
return{
...state,
color:action.color
}
default:
return state
}
}
const creatStore = (reducer)=>{
let state = null
const listeners = []
const subscribe = (liestner)=>listeners.push(liestner)
const getState = ()=>state
const dispatch=(action)=>{
state = reducer(state,action)
listeners.map(item=>item())
}
dispatch({})
return { getState, dispatch, subscribe }
}
export {creatStore,changeDom}
结合context使用store
我们现在把我们的子组件通过context公用App的store,并且把渲染方法和dispatch应用进去
// App.js
import React,{Component} from 'react'
import PropTypes from 'prop-types' //引入
// 引入 store
import {changeDom,creatStore} from './store'
const store = creatStore(changeDom)
export default class App extends Component {
// 我们在这里把store挂到context上
static childContextTypes = {
store: PropTypes.object
}
getChildContext(){
return{store}
}
constructor(){
super()
this.state={
}
}
componentWillMount(){
// console.log(hashHistory)
}
render() {
return (
<div>
<Children />
<ChildrenTwo />
</div>
)
}
}
// 这里我们再去修改我们的子孙组建 让他们可以拿到 store
// 为了展示效果定义子组件一
class Children extends Component{
static contextTypes = {
store: PropTypes.object
}
constructor(){
super()
this.state={
color:"",
text:""
}
}
// 这里我们定义两个渲染方法
getColor(){
let store = this.context.store.getState()
this.setState({color:store.color})
}
// 这里我们定义两个渲染方法
getText(){
let store = this.context.store.getState()
this.setState({text:store.text})
}
// 这里组件加载之前渲染
componentWillMount(){
this.getColor()
this.getText()
}
render(){
return(
<div>
<h1 style={{color:this.state.color}}>{this.state.text}</h1>
</div>
)
}
}
// 为了展示效果定义子组件二 ChildrenTwo 是 Children的子组件 但是却通过context拿到了App组件拿过来的值 (越级传递)
class ChildrenTwo extends Component{
static contextTypes = {
store: PropTypes.object
}
constructor(){
super()
this.state={
}
}
// 这里我们定义 两个 action
changeColor=()=>{
this.context.store.dispatch({type:"CHANGE_COLOR",color:"green"})
console.log(this.context.store.getState())
}
changeText=()=>{
this.context.store.dispatch({type:"CHANGE_TEXT",text:"我变了"})
console.log(this.context.store.getState()) //这里方便大家看到数据变了
}
render(){
return(
<div>
<button onClick={()=>{this.changeText()}}>变字</button>
<button onClick={()=>{this.changeColor()}}>变色</button>
</div>
)
}
}
显然 现在我们点击按钮的时候,并没有发生任何事情,可是我们看console可以看到,store的数据确实变化了,这是为什么呢?很简单 我们没有把dom监听放进来,下一步我们要设置监听。
设置dom监听
// Children组件 我们在componentWillMount 中添加监听
class Children extends Component{
static contextTypes = {
store: PropTypes.object
}
constructor(){
super()
this.state={
color:"",
text:""
}
}
// 这里我们定义两个渲染方法
getColor(){
let store = this.context.store.getState()
this.setState({color:store.color})
}
// 这里我们定义两个渲染方法
getText(){
let store = this.context.store.getState()
this.setState({text:store.text})
}
// 这里组件加载之前渲染
componentWillMount(){
this.getColor()
this.getText()
this.context.store.subscribe(()=>{this.getColor()})
this.context.store.subscribe(()=>{this.getText()})// 使用箭头函数 保证this指向
}
render(){
return(
<div>
<h1 style={{color:this.state.color}}>{this.state.text}</h1>
</div>
)
}
}
到这里我们已经简单地实现了react-redux,可是大家有没有觉得怪怪的?
开始创建connect
没错 到这里我们频繁使用context,并且每个组件都要去手动挂context 这是相当麻烦的,现在我们想要让这些东西都自动包裹 自动生成,我们再怎么做呢。
我们创建一个高阶组件就可以搞定这个问题了(一个函数,接收一个组件,生成另外一个包装好的新组件)
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export const connect = (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
render(){
return<WrappedComponent />
}
}
return Connect
}
我们这里通过 connect函数来接收一个组件 经过一层封装 返回一个包装了context的组件 但是现在这样的话 我们每次使用都还需要大量的书写 this.context 是不是相当恶心呢? 并且每个组件都拿到了store 有很多事它并不需要的,这时候我们就需要告诉这个高阶组件,我这里就只需要这些东西。这就是 mapStateToProps
import React, { Component } from 'react'
import PropTypes from 'prop-types'
// 示例 这里不用
// const mapStateToProps=(state)=>{
// return{
// color:state.color,
// text:state.text,
// }
// } 就是我们需要从store拿出来的东西
const connect= (mapStateToProps) => (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
render(){
const store = this.context.stote
let stateProps = mapStateToProps(store.getState())
然后我们把stateProps用...展开
return<WrappedComponent {...stateProps}/>
}
}
return Connect
}
现在我们利用Connect改造我们的组件
// App.js
import React,{Component} from 'react'
import PropTypes from 'prop-types' //引入
// 引入 store
import {changeDom,creatStore} from './store'
const store = creatStore(changeDom)
// ________________________________把connect_____________________________写在app.js 为的是不引入了 实际上它是单独拆分在react-redux中的
const connect = (mapStateToProps) => (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
render(){
const store = this.context.store
console.log(store)
let stateProps = mapStateToProps(store.getState())
// 然后我们把stateProps用...展开
return<WrappedComponent {...stateProps}/>
}
}
return Connect
}
// ________________________________把connect_____________________________写在app.js 为的是不引入了 实际上它是单独拆分在react-redux中的
// app.js 的其他内容...
// ________________________________对组件一进行修改_____________________________
class Children extends Component{
constructor(){
super()
this.state={
color:"",
text:""
}
}
render(){
return(
<div>
<h1 style={{color:this.props.color}}>{this.props.text}</h1>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
color: state.color,
text:state.text
}
}
Children = connect(mapStateToProps)(Children)
// ________________________________对组件一进行修改_____________________________
现在我们成功把store里面的所有东西都挂到了props上面,我们不需要去依赖context,只需要调用props即可。剩下的就是我们的数据变更,渲染还有监听了!
对 connect 进一步改造 其实就是像我们上面的组件一样 挂载监听
const connect = (mapStateToProps) => (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
componentWillMount(){
const{store} = this.context
this.updata()
store.subscribe(()=>this.updata())
}
updata=()=>{
const { store } = this.context
let stateProps = mapStateToProps(store.getState(), this.props)
this.setState({
allProps: { // 整合普通的 props 和从 state 生成的 props
...stateProps,
...this.props
}
})
}
render(){
// 然后我们把allProps用...展开
return<WrappedComponent {...this.state.allProps}/>
}
}
return Connect
}
mapDispatchToProps
state我们改造完了,dispatch 是不是也要一起改造呢?答案是肯定的,mapDispatchToProps就是做这个的。
我们看看 mapDispatchToProps 是怎么写的 我们倒着推
//const mapDispatchToProps = (dispatch) => { // 传入的是 dispatch
// return { //返回一个函数
// changeColor: (color) => {
// dispatch({ type: 'CHANGE_COLOR', color: color })
// }
// }
//}
const connect = (mapStateToProps,mapDispatchToProps) => (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
componentWillMount(){
const{store} = this.context
this.updata()
console.log(store)
store.subscribe(()=>this.updata())
}
updata=()=>{
const { store } = this.context
let stateProps = mapStateToProps?mapStateToProps(store.getState(), this.props):{}
let dispatchProps = mapDispatchToProps?mapDispatchToProps(store.dispatch,this.props):{}
// 我们要考虑到空值处理
this.setState({
allProps: { // 整合普通的 props 和从 state 生成的 props
...stateProps,
...this.props
...dispatchProps,
}
})
}
render(){
// 然后我们把allProps用...展开
return<WrappedComponent {...this.state.allProps}/>
}
}
return Connect
}
到这里我们可以把ChildrenTwo的代码也改造了
class ChildrenTwo extends Component{
constructor(){
super()
this.state={
}
}
render(){
console.log(this.props)
return(
<div>
<button onClick={()=>{this.props.changeText("我变了")}}>变字</button>
<button onClick={()=>{this.props.changeColor("green")}}>变色</button>
</div>
)
}
}
const mapDispatchToProps = (dispatch)=>{
return { //返回一个函数
changeColor: (color) => {
dispatch({ type: 'CHANGE_COLOR', color: color })
},
changeText:(text)=>{
dispatch({ type: 'CHANGE_TEXT', text: text })
}
}
}
ChildrenTwo = connect(null,mapDispatchToProps)(ChildrenTwo)
到现在 一个简单的 react-redux已经差不多了,但是react-redux里面还有一个<Provider>
但是我们还没有这东西 这是什么呢?实际上它做的事跟我们App这个组件做的事一毛一样,主要就是把store挂到context上。
export class Provider extends Component{
static childContextTypes = {
store: PropTypes.object
}
getChildContext(){
return{store}
}
render() {
return (
<div>{this.props.children}</div>
)
}
}
于是 我们现在的代码变成了这样
好了 道理讲完了 我们现在开始拆分代码啦。
// store.js
export const creatStore = (reducer)=>{
let state = null
const listeners = []
const subscribe = (liestner)=>listeners.push(liestner)
const getState = ()=>state
const dispatch=(action)=>{
state = reducer(state,action)
listeners.map(item=>item())
}
dispatch({})
return { getState, dispatch, subscribe }
}
// reducer.js
// 这是我们的 reducer 可以单独拆分成一个js文件 自己拆吧
export const changeDom = (state,action) => {
if(!state)return{
text : "我是实例文字",
color : 'red'
}
switch(action.type){
case "CHANGE_TEXT":
return{
...state,
text:action.text
}
case "CHANGE_COLOR":
return{
...state,
color:action.color
}
default:
return state
}
}
// react-redux.js
import React,{Component} from 'react'
import PropTypes from 'prop-types' //引入
export const connect = (mapStateToProps,mapDispatchToProps) => (WrappedComponent)=>{
class Connect extends Component{
static contextTypes = {
store: PropTypes.object
}
componentWillMount(){
const{store} = this.context
this.updata()
store.subscribe(()=>this.updata())
}
updata=()=>{
const { store } = this.context
let stateProps = mapStateToProps?mapStateToProps(store.getState(), this.props):{}
let dispatchProps = mapDispatchToProps?mapDispatchToProps(store.dispatch,this.props):{}
// 做一下空值处理
this.setState({
allProps: { // 整合普通的 props 和从 state 生成的 props
...stateProps,
...this.props,
...dispatchProps,
}
})
}
render(){
// 然后我们把allProps用...展开
return<WrappedComponent {...this.state.allProps}/>
}
}
return Connect
}
export class Provider extends Component{
static childContextTypes = {
store: PropTypes.object
}
getChildContext(){
return {store:this.props.store}
}
render() {
return (
<div>{this.props.children}</div>
)
}
}
// App.js
import React,{Component} from 'react'
import Children from './Children'
import ChildrenTwo from './ChildrenTwo'
export default class App extends Component {
constructor(){
super()
this.state={
}
}
render() {
return (
<div>
<Children />
<ChildrenTwo />
</div>
)
}
}
// Children.js
import React,{Component} from 'react'
import{connect} from './react-redux.js'
class Children extends Component{
constructor(){
super()
this.state={
color:"",
text:""
}
}
render(){
return(
<div>
<h1 style={{color:this.props.color}}>{this.props.text}</h1>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
color: state.color,
text:state.text
}
}
Children = connect(mapStateToProps)(Children)
export default Children
// ChildrenTwo.js
import React,{Component} from 'react'
import{connect} from './react-redux.js'
class ChildrenTwo extends Component{
constructor(){
super()
this.state={
}
}
render(){
return(
<div>
<button onClick={()=>{this.props.changeText("我变了")}}>变字</button>
<button onClick={()=>{this.props.changeColor("green")}}>变色</button>
</div>
)
}
}
const mapDispatchToProps = (dispatch)=>{
return { //返回一个函数
changeColor: (color) => {
dispatch({ type: 'CHANGE_COLOR', color: color })
},
changeText:(text)=>{
dispatch({ type: 'CHANGE_TEXT', text: text })
}
}
}
ChildrenTwo = connect(null,mapDispatchToProps)(ChildrenTwo)
export default ChildrenTwo
拆完了的代码是不是简单明了
真正工作里面 我们需要多做两步
npm i redux --save
npm i react-redux --save
然后 我们
对照着修改这几个位置
// creatStore 在 redux 插件中
// connect,Provider 在 react-redux 插件中
// 也就是用到哪里了 对应修改哪里 改完了你就发现了新大陆了
import { createStore } from 'redux'
import { connect,Provider } from 'react-redux'
不知不觉发现自己不仅仅会用了react-redux 并且还自己实现了一个react-redux 很舒坦的呢
总结
在我们四档下篇到这里结束了,这就是react-redux的实现和写法,大家自己去实现真正的写法,这里不做演示相当于给大家留个作业,有错误或者是有建议 或者有不懂的地方 扫码加我微信给大家解答。