水平不夠 這篇不知道怎么寫(xiě) 就純粹當(dāng)自己的筆記本
如果有人想看的話 得有一定的 redux / react-redux 使用基礎(chǔ)才能看明白我寫(xiě)得這一坨
以后要是我水平上去了 會(huì)慢慢完善內(nèi)容的

首先我們?cè)?react 項(xiàng)目中使用 redux 和 react-redux 這兩個(gè)庫(kù)的時(shí)候基本會(huì)有這么幾個(gè)必用的方法/組件:

redux

• createStore
• applyMiddleware
• compose
• combineReducers

react-redux

• connect
• Provider

這幾個(gè)方法/組件我挨個(gè)抄了實(shí)現(xiàn)了 demo, 另外還有一些輔助實(shí)現(xiàn)的函數(shù), 和涉及到的 context 的概念
都會(huì)寫(xiě)出來(lái)記錄一下 方便下次理解

首先是 react-redux 里的 Provider

ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root'))

這個(gè)組件我最開(kāi)始寫(xiě) react 項(xiàng)目的時(shí)候有一個(gè)地方不明白 就是這個(gè) store={store}
它涉及到的概念是 context, 我先寫(xiě)一下 context 的東西記一記

import React from 'react'
import PropTypes from 'prop-types'

class Sidebar extends React.Component {
    render() {
        return (
            <div>
                <p>Sidebar</p>
                <Navbar />
            </div>
        )
    }
}

class Navbar extends React.Component {
    static contextTypes = {
        user: PropTypes.string
    }
    render() {
        return (
            <div>
                {this.context.user}'s Navbar
            </div>
        )
    }
}

class Page extends React.Component {
    static childContextTypes = {
        user: PropTypes.string
    }
    constructor(props) {
        super(props)
        this.state = {
            user: 'admin'
        }
    }
    getChildContext() {
        return this.state
    }
    render() {
        return (
            <div>
                <p>I'm {this.state.user}</p>
                <Sidebar />
            </div>
        )
    }
}

export default Page

這段代碼里 我們有三個(gè)存在依次調(diào)用關(guān)系的組件 Page > Sidebar > Navbar 目的是在最下層的 Navbar 里拿到最上層的 Page 的一個(gè)數(shù)據(jù)
不用 props 不用 redux 現(xiàn)成的庫(kù), 那就是手寫(xiě) context

• 寫(xiě)法就是最上層組件設(shè)置 childContextTypes 對(duì)象和 getChildContext 方法
  要調(diào)用 context 的組件設(shè)置 contextTypes 對(duì)象 然后就能在組件里 this.context 拿到最上級(jí)組件設(shè)置到 context 里的數(shù)據(jù)

具體看中文站官網(wǎng) 寫(xiě)得賊詳細(xì) http://www.css88.com/react/docs/context.html

我上面的例子就是寫(xiě)法不一樣而已

另外現(xiàn)在 react 16 版本的 context API 也改了 官網(wǎng)同步了文檔https://reactjs.org/blog/2018/03/29/react-v-16-3.html

怎么說(shuō)呢 我覺(jué)得改了之后單純從使用角度來(lái)講并沒(méi)有什么很大的意義 不如不改 不過(guò)無(wú)所謂了 反正日常 context 的需求都可以拿 redux 替代掉 我也不會(huì)主動(dòng)去用這個(gè)東西

現(xiàn)在我們知道 context 是個(gè)什么東西 而 Provider 就是用到了它 下面就是一個(gè)最簡(jiǎn)單實(shí)現(xiàn)的 Provider

export class Provider extends React.Component {
    static childContextTypes = {
        store: PropTypes.object
    }
    constructor(props, context) {
        super(props, context)
        this.store = props.store
    }
    getChildContext() {
        return {
            store: this.store
        }
    }
    render() {
        return this.props.children
    }
}

首先 childContextTypes 和 getChildContext 那邊沒(méi)什么好說(shuō)的 就是在 Provider 這個(gè)組件里設(shè)置一下 context
constructor 里面第二個(gè)參數(shù)默認(rèn)就是 context 可以直接拿來(lái)用
render 里面就是渲染一下 App (看下面)

ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root'))

接著我們看下 react-redux 里的 connect

這個(gè)就稍微麻煩一點(diǎn) 所以抄了個(gè)最簡(jiǎn)單的 demo
首先我們使用 connect 方法是有很多寫(xiě)法的, mapStateToProps 啊, 裝飾器啊, 裸奔啊等等, 這里就舉個(gè)最簡(jiǎn)單的例子

App = connect(
    state=>({num: state}),
    {addFun, removeFun, addFunAsync}
)(App)

以上面這個(gè)調(diào)用做為例子實(shí)現(xiàn)的最簡(jiǎn)單的 connect demo 如下

const connect = (mapStateToProps=state=>state, mapDispatchToProps={}) =>
     (WrapComponent) => {
         return class ConnectComponent extends React.Component {
            static contextTypes = {
                store: PropTypes.object
            }
            constructor(props, context) {
                super(props, context)
                this.state = {
                    props: {}
                }
            }
            componentDidMount() {
                const {store} = this.context
                store.subscribe(() => this.update())
                this.update()
            }
            update() {
                // 從 context 上下文里把 store 扒出來(lái), 然后借用 mapStateToProps 和 mapDispatchToProps 裝飾新的組件
                const {store} = this.context
                const stateProps = mapStateToProps(store.getState())
                const dispatchProps= bindActionCreators(mapDispatchToProps, store.dispatch)
                this.setState({
                    props: {
                        ...this.state.props,
                        ...stateProps,
                        ...dispatchProps
                    }
                })
            }
            render() {
                return (
                    <WrapComponent {...this.state.props}></WrapComponent>
                )
            }
         }
     }

首先 connect 是一個(gè) HOC(高階組件 Higher-Order Components)
這里的雙箭頭函數(shù)第一個(gè)箭頭前面的參數(shù)就是 connect 調(diào)用時(shí)候第一個(gè)括號(hào)里的兩個(gè)參數(shù)
第二個(gè)箭頭前面的參數(shù)就是 App 這個(gè)組件
所以 connect 就是把 mapStateToProps 和 mapDispatchToProps 這倆東西塞進(jìn)了 App 組件里產(chǎn)生了一個(gè)新的 App 組件給我們用(當(dāng)然不止這倆 其他參數(shù)就不記了 太麻煩了)

然后看 renturn 的 ConnectComponent 組件里面

class ConnectComponent extends React.Component {
      static contextTypes = {
            store: PropTypes.object
        }
        constructor(props, context) {
            super(props, context)
            this.state = {
                props: {}
            }
        }
        componentDidMount() {
            const {store} = this.context
            store.subscribe(() => this.update())
            this.update()
        }
        update() {
            // 從 context 上下文里把 store 扒出來(lái), 然后借用 mapStateToProps 和 mapDispatchToProps 裝飾新的組件
            const {store} = this.context
            const stateProps = mapStateToProps(store.getState())
            const dispatchProps= bindActionCreators(mapDispatchToProps, store.dispatch)
            this.setState({
                props: {
                    ...this.state.props,
                    ...stateProps,
                    ...dispatchProps
                }
            })
        }
        render() {
            return (
                <WrapComponent {...this.state.props}></WrapComponent>
            )
        }
}

contextTypes 里面就是從 Provider 里拿數(shù)據(jù) 沒(méi)什么講的
constructor 里 state 等會(huì)講
componentDidMount 的時(shí)候做了監(jiān)聽(tīng) 等于每次數(shù)據(jù)變化都會(huì)調(diào)用一次 update 函數(shù)(subscribe 之后也會(huì)實(shí)現(xiàn)一下)
update 里面首先把給 mapStateToProps 這個(gè)函數(shù)傳入了當(dāng)前了 store 作為參數(shù) 返回過(guò)濾后的數(shù)據(jù) num(看下面)

state=>({num: state}) // mapStateToProps

然后有個(gè) bindActionCreators 函數(shù), 代碼如下

function bindActionCreator(creator, dispatch) {
    return (...args) => dispatch(creator(...args))
}
 
function bindActionCreators(creators, dispatch) {
    let bound = {}
    Object.keys(creators).forEach(v => {
        let creator = creators[v]
        bound[v] = bindActionCreator(creator, dispatch)
    })
    return bound
}

它把 mapDispatchToProps 里面所有的方法全都扒出來(lái) 然后拿 dispatch 給包一層(dispatch 一會(huì)也會(huì)實(shí)現(xiàn)一下) 然后返回出去
至于為什么要拿 dispatch 包一層 畢竟不做 dispatch 的話不會(huì)更新到 store 里去

setState 里面的按這種寫(xiě)法來(lái)的話 三個(gè)對(duì)象的解構(gòu)順序要排好 先把 this.state.props 也就是之前的數(shù)據(jù)解構(gòu)出來(lái) 然后再解構(gòu)新的有更改的數(shù)據(jù) 不然你頁(yè)面UI讀 store 里更新的數(shù)據(jù)是不會(huì)重新渲染的

最后 render 里面直接把所有處理好的東西全塞進(jìn) WrapComponent 也就是外面?zhèn)鞯?App 組件的 props 里

這就是 react-redux 里干的比較重要的活 Provider 和 connect

現(xiàn)在我們把 redux 簡(jiǎn)單的實(shí)現(xiàn)一下

function createStore(reducer, middleware) {
    if(middleware) {
        return middleware(createStore)(reducer)
    }
    let currentState = {}
    let currentListeners = []
 
    function getState() {
        return currentState
    }
    function subscribe(listener) {
        currentListeners.push(listener)
    }
    function dispatch(action) {
        currreducer = reducer(currentState, action)
        currentListeners.forEach(v => v())
        return action
    }
    dispatch({
        type: '@THIS_REDUX-DEMO_INIT-TYPE'
    })
 
    return {getState, subscribe, dispatch}
}
 
function applyMiddleware(...middlewares) {
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = store.dispatch
 
        const midApi = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }
        const middlewareChain = middlewares.map(middleware => middleware(midApi))
        dispatch = compose(...middlewareChain)(store.dispatch)
        return {
            ...store,
            dispatch
        }
    }
}
 
function compose(...funcs) {
    if(funcs.length == 0) {
        return arg => arg
    }
    if(funcs.length == 1) {
        return funcs[0]
    }
    return funcs.reduce((res, item) => (...args) => res(item(...args)))
}

先看下 createStore
getState 這個(gè)方法就是把一個(gè)存著數(shù)據(jù)的變量丟出去給調(diào)用者 沒(méi)什么好講的
subscribe 也是往一個(gè)內(nèi)部維護(hù)的數(shù)組里丟一些函數(shù)(比如下面這種)

function listener(){
  const current = store.getState()
  console.log(`num is: ${current}`)
}

那么在每次 dispatch 的時(shí)候先把 store 通過(guò)調(diào)用 reducer 函數(shù)更新一下 然后把所有被監(jiān)聽(tīng)的 listener 調(diào)用一下就完事了
然后把定義好的三個(gè)方法 return 出去, 就能在 Provider 里當(dāng) store 用了
至于 createStore 里面那個(gè)執(zhí)行了一次的 dispatch 就是初始化 store 用的 不用管

然后我們看下 applyMiddleware
我們這里只用它就是為了加個(gè) thunk 中間件 這個(gè)本來(lái)也是一個(gè) npm 的庫(kù) 用來(lái)讓 action 可以返回函數(shù) 而不是只能返回對(duì)象(一會(huì)也會(huì)把 thunk 實(shí)現(xiàn)一下)(調(diào)用如下)

const store = createStore(counter,applyMiddleware(thunk))

那么 thunk 被傳入 applyMiddleware 里面以后也是做了一遍 HOC 的操作
別的都沒(méi)什么好講 無(wú)外乎就是同樣的 接參數(shù)/傳參數(shù)/調(diào)方法 套路 唯一有個(gè)要提的就是 compose
它的場(chǎng)景是這樣的

const store = createStore(counter,applyMiddleware(thunk1, thunk2, thunk3))

處理我們傳入了多個(gè)中間件的情況 處理的關(guān)鍵就是這么一句話(如下)

funcs.reduce((res, item) => (...args) => res(item(...args)))

利用 Array.prototype.reduce 方法做了柯里化處理 最后達(dá)成的效果就是

thunk1(thunk2(thunk3))

當(dāng)然這里的三個(gè) thunk 都是被包裝 store 處理后的(如下)

const midApi = {
    getState: store.getState,
    dispatch: (...args) => dispatch(...args)
}
// 所有的 thunk 包裝后拼成一個(gè) Array 返回在 middlewareChain 里
const middlewareChain = middlewares.map(middleware => middleware(midApi)) 

如果有人看到這里對(duì)柯里化不熟的話 可以去 mdn 看看 reduce 的文檔 至于其他的語(yǔ)法糖不熟就隨便百度一下就好 都沒(méi)啥特別的

最后我們?cè)賹?shí)現(xiàn)一下 thunk

const thunk = ({dispatch, getState}) =>
    next => action => {
        if(typeof action == 'function') {
            return action(dispatch, getState)
        }
        return next(action)
    }

還是 HOC 那一套 注意一下這個(gè) next 參數(shù) 它就是下一個(gè) thunk
比如現(xiàn)在是 thunk1 那么 next 參數(shù)就是 thunk2

貼一下所有 demo 的調(diào)用代碼給女朋友輔助閱讀

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import thunk2 from 'redux-thunk2'
import { counter } from 'redux'
import { Provider } from 'react-redux'
import App from './App'

const store = createStore(counter,applyMiddleware(thunk,thunk2))
ReactDOM.render(
  (
    <Provider store={store}>
      <App />
    </Provider>
  ),
document.getElementById('root'))

// App.js
import React from 'react'
import { connect } from 'react-redux'
import { addFun, removeFun, addFunAsync } from './index.redux'

class App extends React.Component{
  render(){
    return (
      <div>
        <h2>num is: {this.props.num}</h2>
        <button onClick={this.props.addGun}>add</button>
        <button onClick={this.props.removeGun}>reomve</button>
        <button onClick={this.props.addGunAsync}>addAsync</button>
      </div>
    )
  }
}
// 裸奔模式
App = connect(
    state=>({ num: state}),
    {addGun, removeGun, addGunAsync}
)(App)
// 裝飾器模式
// @connect(
//   state=>({ num: state}),
//   {addGun, removeGun, addGunAsync,addTwice}
// )

export default App

完

(以后隨緣完善 這個(gè)源碼太煩了 看得頭痛 我覺(jué)得一般了解一下最基本幾個(gè)方法就夠了 沒(méi)事不要去讀源碼 太浪費(fèi)時(shí)間了)