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。
面试题
如何通过中间件让redux支持异步action？
有两个中间件比较著名redux-thunk和redux-promise。
redux-thunk它发现action是个函数就调用它，否则就让它直接进入下一个中间件。
redux-promise它发现payload是个promise，就在promise后面接上一个then。
更多文章，请点击 我的博客
