react-redux的实现

2019 / 03 / 31

前言

包括上一篇文章在内的文章都只是自己的学习笔记,很多东西认识还不算深刻,欢迎指出问题

下边展示的代码可以在这里获取 https://github.com/soWhiteSoColl/dodo-redux

React中的context

新版的react-redux用到了React.createContext去创建全局的store。所以首先需要讲讲这个API。

contextAPI在react作为16.x之后出现的新功能,要比其他的功能名气小一点,比如风风火火的hooks,比如新添加的生命周期,createRef和createPortal一般的react开发者都有所耳闻或者已经用在项目中了,但是createContext很少被人提起,其实这个东西可以实现全局的数据控制,由于需要用全局数据的时候都去用redux或者mobx了,所以很少有人用react提供的这个新的API。其实这个很好用,也很简单。

context是用来实现全局数据的。

主要的API包括 createContext,Context.Provider和Context.Consumer

这三个API很容易理解,createContext可以创建一个store,然后传入一个默认值,Provider中注入store,也可以改变store,然后在Consumer即中去使用Provider提供的值。

Context API本身就很容易使用去实现全局的数据,也很容易理解。当然在16.x之前react-redux并不是用ContextAPI实现的数据注入。而是使用一种发布订阅模式,在构建应用的时候回去订阅store的变化,然后在store改变时进行相应的改变。

发布订阅模式会在下边有所提及。

Provider的实现

首先创建一个Context

import React from 'react'
const Context = React.createContext(null)
export default Context

如果知道context的用法的话就很容易知道Provider的实现了。

import React, { Component } from 'react'
import Context from './Context'

export default class Provider extends Component {
state = {
storeState: this.props.store.getState(),
store: this.props.store
}

componentDidMount() {
this.subscribe()
}

componentWillUnmount() {
if (this.unsubscribe) this.unsubscribe()
this._isMounted = false
}

componentDidUpdate(prevProps) {
if (this.props.store !== prevProps.store) {
if (this.unsubscribe) this.unsubscribe()
this.subscribe()
}
}

subscribe() {
const { store } = this.props
this.unsubscribe = store.subscribe(() => {
const newStoreState = store.getState()
this.setState(state =>
state.storeState === newStoreState
? null
: { storeState: newStoreState }
)
})
}

render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}

connect的实现

import React from 'react'
import Context from '../components/Context'

export default function connect(mapStateToProps, mapDispatchToProps) {
return function hoc(Component) {
return class NewComponent extends React.Component {
render() {
const originProps = this.props
return (
<Context.Consumer>
{value => {
const { storeState, store } = value
const stateProps = mapStateToProps(storeState)
const dispatchProps = mapDispatchToProps(store.dispatch)
return (
<Component
{...originProps}
{...stateProps}
{...dispatchProps}
/>
)
}}
</Context.Consumer>
)
}
}
}
}

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟