手写Redux(3)

Redux文档-store

API封装技巧

内容:分别模拟封装store的三个方法

• getState()
• dispatch(action)
• subscribe(listener)

封装前代码

redux.js
import React, { useState, useContext, useEffect } from "react"

const store = {
  state: undefined,
  reducer: undefined,
  setState(newState) {
    console.log(newState)
    store.state = newState
    store.listeners.map(fn => fn(store.state))
  },
  listeners: [],
  subscribe(fn) {
    store.listeners.push(fn) //订阅
    return () => { //取消订阅
      const index = store.listeners.indexOf(fn)
      store.listeners.splice(index)
    }
  }
}

export const createStore = (reducer, initState) => {
  store.state = initState
  store.reducer = reducer
  return store
}

const changed = (oldState, newState) => {
  let changed = false
  for (let key in oldState) {
    if (oldState[key] !== newState[key]) {
      changed = true
    }
  }
  return changed
}

export const connect = (selector, mapDispatchToProps) => (Component) => {
  return (props) => {
    const dispatch = (action) => {
      setState(store.reducer(state, action))
    }
    const { state, setState } = useContext(appContext);
    const [, update] = useState({})
    const data = selector ? selector(state) : { state: state } 
    const dispatchers = mapDispatchToProps ? mapDispatchToProps(dispatch) : { dispatch }
    useEffect(() => {
      return store.subscribe(() => { //取消selector重复订阅
        const newDate = selector ? selector(store.state) : { state: store.state }
        if (changed(data, newDate)) {
          console.log('update')
          update({})
        }
      })
    }, [selector])//添加依赖
    return <Component {...props} {...data} {...dispatchers} />
  }
}
export const appContext = React.createContext(null)
export const Provider = ({ store, children }) => {
  return (
    <appContext.Provider value={store}>
        {children}
    </appContext.Provider >
  )
}

getState()

目前我们的store属性太多了，如何隐藏属性并构造出getState

第一部分.把state变成getState
把state放到上面变成let变量,在store内声明getState并return state。

let state = undefined
const store = {
  getState() {
    return state
  },
}

审查代码,把所有用到state的地方(store.state)改成state,把上下文里的state去掉，这样它就会直接从外面的变量里去读。
刷新手动测试，如果我们写了单元测试的代码会更好点，但是没有写只能手动的测试。

第二部分.把一些不必要的变量隐藏起来
1.把reducer隐藏起来，不能暴露出去容易被人改。
直接放到外面

let reducer = undefined

审查代码,把所有用到reducer的地方(store.reducer)改成reducer,对于重名的reducer,可以把我们内部的reducer改为_reducer或者将重名的reducer改为_reducer

2.隐藏listeners

let listeners = []

封装dispatch(action)

先将setState隐藏起来，直接娜上去。

const setState = (newState) => {
  console.log(newState)
  state = newState
  listeners.map(fn => fn(state))
}

审查代码
这样的话我们的dispatch就不需要从上下文里拿了(可以删掉了)，直接去引用外面的就可以了。
既然dispatch里的setState、reducer、state都是引用外面的，那dispatch可以直接放到外面(store)。
修改所有用到dispatch的地方，如果不想改的话还有种方法：声明dispatch=store.dispatch

const dispatch = store.dispatch

下面就可以直接使用dispatch了。
replaceReducer(nextReducer)很少用。
封装后的代码

import React, { useState, useContext, useEffect } from "react"
let state = undefined
let reducer = undefined
let listeners = []
const setState = (newState) => {
  console.log(newState)
  state = newState
  listeners.map(fn => fn(state)) 
}

const store = {
  getState() {
    return state
  },
  dispatch: (action) => {
    setState(reducer(state, action)) 
  },
  subscribe(fn) {
    listeners.push(fn) //订阅
    return () => { //取消订阅
      const index = store.listeners.indexOf(fn)
      listeners.splice(index)
    }
  }
}
const dispatch = store.dispatch 

export const createStore = (_reducer, initState) => {
  state = initState
  reducer = _reducer
  return store
}

const changed = (oldState, newState) => {
  let changed = false
  for (let key in oldState) {
    if (oldState[key] !== newState[key]) {
      changed = true
    }
  }
  return changed
}

export const connect = (selector, mapDispatchToProps) => (Component) => {
  return (props) => {
    const [, update] = useState({})
    const data = selector ? selector(state) : { state: state } 
    const dispatchers = mapDispatchToProps ? mapDispatchToProps(dispatch) : { dispatch }
    useEffect(() => {
      return store.subscribe(() => { //取消selector重复订阅
        const newDate = selector ? selector(state) : { state: state }
          if (changed(data, newDate)) {
            console.log('update')
            update({})
          }
        })
      }, [selector])
      return <Component {...props} {...data} {...dispatchers} />
    }
}
export const appContext = React.createContext(null)

export const Provider = ({ store, children }) => {
  return (
    <appContext.Provider value={store}>
      {children}
    </appContext.Provider >
  )
}

让Redux支持 函数Action

目前redux不支持异步action,如果要让redux支持异步action怎么做？怎么实现待会再说，现在先搞清楚目的:为何我们要让redux支持异步action。

异步更新user.name
目前是frank,当我点击异步获取user3s后就会变成3s后的frank,也就是说我去异步更新user.name

index.js
const ajax = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({data: {name: '3秒后的frank'}})
    }, 3000)
  })
}

const fetchUser = (dispatch)=>{
  ajax('/user').then(response => {
    dispatch({type:'updateUser', payload:response.data})
  })
}
const UserModifier = connect(null, null)(({state, dispatch}) => {
//let prevDispatch = dispatch
//var dispatch = (fn) => {
//  fn(prevDispatch)
// }  
  console.log("UserModifier执行了" + Math.random())
  const onClick = (e) => {
    dispatch(fetchUser)
  //fetchUser(dispatch) 需要传dispatch
  }
  return <div>
    <div>User: {state.user.name}</div>
    <button onClick={onClick}>异步获取 user</button>
  </div>
})

fetchUser(dispatch)不优美，我们把它写成dispatch(fetchUser)，但是这里的dispatch与props里的dispatch重名了，我们可以将props里的dispatch改为prevDispatch

但是对于dispatch的修改明显不应该放在这里，待会再说。

目的清楚了: 之所以需要异步action实际上是因为我们不想写出fetchUser(dispatch)这样的代码，我们希望写出的是dispatch(fetchUser)，如果按照以前的观点来看dispatch后面接的是action，那现在fetchUser就是个action。这个fetchUser不是之前的由type、payload组成的对象的action，而是一个函数action。那我们把这种函数action就叫做异步action。

我们需要redux支持异步action目的是不写出fetchUser(dispatch)而是写出dispatch(fetchUser)这样的代码。

那如何实现dispatch(fetchUser)？

redux.js
let dispatch = store.dispatch
const prevDispatch = dispatch
dispatch = (action) => { 
  if (action instanceof Function) {//函数，如果是函数就调用action,并传个dispatch给它
    action(dispatch) //这里是dispatch(既能处理函数又能处理对象)
  } else { //对象，如果是普通action就传给之前的
    prevDispatch(action)
  }
}

现在我们的redux就支持了异步的redux,支持的方法:没有使用中间件而是直接对我们的dispatch进行改写，如果它是函数就让它重新dispatch,如果不是函数就直接用原始的dispatch调用action。

让Redux支持 Promise Action

目的:支持promise的数据而不是直接的数据

const ajax = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: { name: '3秒后的frank' } })
    }, 3000)
  })
}
const UserModifier = connect(null, null)(({ state, dispatch }) => {
  console.log("UserModifier执行了" + Math.random())
  const onClick = (e) => {
    dispatch({type:'updateUser',payload:ajax('/user').then(response=>response.data)})
  //dispatch(fetchUser)
  }
  ...
})

之前payload传的是同步对象，现在改传异步对象。
这种就比dispatch(fetchUser)更明确一点，直接表示要创建的类型是{type:'updateUser'},因为fetchUser看名字容易误以为要创建的是fetchUser，实际上创建的是updateUser。

redux.js
const prevDispatch2 = dispatch
dispatch = (action) => {
  if (action.payload instanceof Promise) {
    action.payload.then(data => {
      dispatch({ ...action, payload: data })
    })
  } else {
    prevDispatch2(action)
  }
}

如果payload是promise，我就在promise后面加个then，then里面拿到data之后，就把data放到payload里面。

上节讲了对action的扩展，一个让action支持函数，一个让action支持promise，现在来讲下中间件。

为什么要用中间件？
因为这2个功能redux并没有内置，第一个功能是支持函数，第二个功能是支持payload为promise。
不支持，我们该怎么办呢？
于是redux说，你在创建store时可以传第三个参数，第三个参数就是中间件。

写法： applyMiddleware(a,b)

index.js
const store=createStore(reducer,initState,applyMiddleware(reduxThunk,reduxPromise))

阅读redux-thunk和redux-promise源码:
redux-thunk就是一个标准的Redux middleware。
它的核心代码其实只有两行，就是判断每个经过它的action：如果是function类型，就调用这个function（并传入 dispatch和getState及extraArgument为参数），而不是任由让它到达reducer，因为reducer是个纯函数，Redux规定到达reducer的action必须是一个plain object类型。

跟我们封装的代码差不多，这就是middleware，middleware就是你可以自己去修饰dispatch。

欢迎点击 我的博客 查看更多文章