手写Redux (2)
目录
1.Selectorconnect的第一个参数
2.mapDispatchToPropsconnect的第二个参数
3.connect的意义
4.封装Provider和createStore
Selector
Selector是connect的第一个参数，由React-Redux库提供。
Selector的第1个功能:实现简写
目前我们的User组件只用到了state.user
const User=connect( ({state}) => {
return <div> User:{state.user.name} </div>
})
所以如果我们可以提供一个选择函数,比如说connect的第一个参数我们用()来表达，这样我们就可以在这里直接拿到user,下面就不需要state也能直接拿到user了。
index.js
const User = connect( state => {
return {user:state.user}
})( ({user}) => {
return <div> User:{user.name} </div>
})
这种做法什么时候有意义？
如果我们拿数据的.很长，比如{state.xxx.yyy.zzz.user.name},这种方法可以快速获取到局部state。
这只是API的实现，我们还没有对它进行代码的编写。
代码实现
步骤
1.添加参数selector
来到redux.js给connect函数添加一个参数(selector)=>。
先接受一个参数selector再接受第二个参数Component
2.使用参数
把state传进去，data就是用户需要的所有数据，再把data放到<Component />的props后面。
redux.js
export const connect = (selector) => (Component) => {
return (props) => {
//const data = selector(state)
const data=selector ? selector(state) : {state:state}
...
return <Component {...props} {...data} />
}
}
错误处理
如果用户没有传state怎么办？
没传data就是全局state，传了的话就是局部state。
所以要加个判断const data = selector ? selector(state) : {state:state}
3.最后把所有用到connect的地方都改下
index.js
const User = connect( (state) => {
return { user: state.user }
})( ({ user }) => {
return <div> User:{user.name} </div>
})
//这里先不传留个空
const UserModifier=connect()(({ dispatch, state })=> {...}
这就是改造user的过程。
selector除了能实现简写的功能，还有个非常重要的作用
Selector的第2个功能:实现精确渲染
组件只在自己的数据变化时render。
比如说一个组件用到了user,那么如果是其它数据group变化了，不应该渲染用到了user的组件
步骤
1.添加数据’前端组’放到第3个儿子里
redux.js
export const store = {
state: {
user: { name: 'frank', age: 18 },
group: { name: '前端组' }
},
}
index.js
const 小儿子 = connect(state => {
return { group: state.group }
})(({ group }) => {
console.log('小儿子执行了', +Math.random())
return <section>小儿子<div>Group:{group.name}</div></section>
})
点击二儿子修改user,发现小儿子的group竟然也触发了，怎么改？
在connect的wrapper里做检查:如果data没变就不要渲染
之前的代码是如果store变化了就直接update,现在添加条件判断。
2.添加条件判断
我先看下你的新数据是什么，然后再看data和newData是否变化了。
newData得到的过程和data是一样的，只不过你是之前的，上一次的data。这一次是在你订阅发生变化之后我得到的新的statestore.state
然后再看下新旧数据有没有变化
怎么看有没有变化呢？
做个遍历，对于每个旧数据我来看下旧数据的user是否===新数据的user,旧数据的group===新数据的group,只要有一个变化了就算变化，那我就更新。
一般来说，你的useEffect里面用到了哪些来自于属性的东西，都得写在它的依赖里面，比如这个selector就得写在依赖里。
redux.js
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) => (Component) => {
return (props) => {
const { state, setState } = useContext(appContext);
const [, update] = useState({})
const data=selector ? selector(state) : {state:state}
useEffect(() => {
store.subscribe(() => {
//先看下你的新数据是什么
const newDate = selector ? selector(store.state) :
{ state: store.state }
//然后看data和newData是否变化了
if (changed(data, newDate)) {
console.log('update')
update({})
}
})
//注意这里最好 取消订阅，否则在selector变化时会出现重复订阅
}, [selector]) //添加依赖
}
}
如果你不做取消订阅，可能在你意想不到的情况下，它会做不停的订阅。
比如说，我们再添加个state依赖[selector,state],就会导致下面这种情况:你一次输入n个字母，每次改变都会订阅，按的越多订阅的越多，积累了订阅，就会导致订阅了n次。这是因为只要state变化了，它就会重新订阅。
当然这只是示例，state是不需要写在这里的。但是我们还是要处理下selector，防止会出现重复订阅的情况，那怎么处理？
3.取消订阅：预防selector重复订阅
之前已经写好了取消订阅函数
拿到取消订阅函数，把取消订阅return就好了
export const store = {
...
subscribe(fn) {
store.listeners.push(fn)
return () => {
const index = store.listeners.indexOf(fn)
store.listeners.splice(index)
}
}
}
export const connect = (selector) => (Component) => {
return (props) => {
...
useEffect(() => {
const unsubscribe = store.subscribe(() => {
const newDate = selector ? selector(store.state) :
{ state: store.state }
if (changed(data, newDate)) {
console.log('update')
update({})
}
})
return unsubscribe //取消订阅
}, [selector])//添加依赖
...
}
}
mapDispatchToProps
connect(selector,mapDispatchToProps)
//connect的第二个参数`mapDispatchToProps`
mapDispatchToProps还是传一个函数，这个函数需要return一个对象。
这个函数接受一个dispatch,return的是你要更新的东西,比如说我要updateUser。
updateUser就是直接调用dispatch，dispatch第一个参数是它的action，第二个参数是payload,payload接受一个对象，这个对象需要外部传进来。
const UserModifier = connect(null, (dispatch) => {
return {
updateUser: (attrs) => {
dispatch({ type: 'updateUser', payload: attrs })
}
}
})(({ updateUser, state }) => {
const onChange = (e) => {
updateUser({ name: e.target.value })
}
...
})
显的里面的组件很简洁:onChange的时候从props里拿到updateUser,然后把user的信息给传进去。
虽然上面变丑了，但是后续可以继续优化，这里先不讲。
接下来实现connect的第二个参数mapDispatchToProps。
先把它传进来，它怎么用呢？
看下有没有传，如果传了mapDispatchToProps就把dispatch传给这个函数，否则就使用dispatch。
redux.js
export const connect = (selector, mapDispatchToProps) => (Component) => {
return (props) => {
const dispatch = (action) => { setState(reducer(state, action)) }
...
const dispatchers = mapDispatchToProps ?
mapDispatchToProps(dispatch) : { dispatch }
...
return <Component {...props} {...data} {...dispatchers} />
}
}
<Component />就不需要使用dispatch了，而是使用我自己创建的dispatchers
这样我们的dispatch也搞定了。
connect的意义
之前我们说过connect是为了让组件与全局的state就行结合，但实际上你可以发现它的函数的调用形式很奇怪。它为什么先要传一个MapStateToProps、MapDispatchToProps然后再传一个组件呢，为什么不直接三个参数。实际上它是有考虑的。
connect(
MapStateToProps,
MapDispatchToProps)
(组件)
)
优化代码
User用到了user,userModifier也用到了user,实际上这两个应该用到的是同一个selector。
我们可以抽取公共selector。同样dispatch也是如此。
const userSelector = state => {
return { user: state.user }
}
const userDispatcher = (dispatch) => {
return {
updateUser: (attrs) => {
dispatch({ type: 'updateUser', payload: attrs })
}
}
}
const User = connect(userSelector)(({ user }) => {
return <div> User:{user.name} </div>
})
const UserModifier = connect(userSelector, userDispatcher)(({ updateUser, state }) => {
...
})
connect实际上是给了你一种提取读写接口的一种方式，这样你就不用重复的去告诉React怎么读写，但是我们还可以再进一步。connect可以调用两次的另外一个意义是：我们可以直接把这两个部分抽取出来。
const connectToUser = connect(userSelector, userDispatcher)
const User = connectToUser(({ user }) => {
return <div> User:{user.name} </div>
})
const UserModifier = connectToUser(({ updateUser, user }) => {
const onChange = (e) => {
updateUser({ name: e.target.value })
}
return <div>
<input value={user.name} onChange={onChange} />
</div>
})
所以任何的一个组件如果想要数据，直接给自己声明一个connect就可以拿到读和写。
那我们可以创建一个目录connecters，里面可以写各种connectToUser.js。
在src下新建目录connecters，新建文件connectToUser.js
connectToUser.js
//把读写接口复制过来
import { connect } from "../redux"
const userSelector = state => {
return { user: state.user }
}
const userDispatcher = (dispatch) => {
return {
updateUser: (attrs) => { dispatch({ type: 'updateUser', payload: attrs }) }
}
}
export const connectToUser = connect(userSelector, userDispatcher)
使用
index.js
import { connectToUser } from './connecters/connectToUser'
现在我们就知道了，MapStateToProps是用来封装读、MapDispatchToProps是用来封装写，connect是用来封装读和写，也就是封装一个资源，你可以对这个资源进行读写，然后你只要再传一个组件就行了。
之所以分成两次调用就是为了方便你先调用一次得到一个半成品，然后等你想用一个组件的时候就可以调用不同的组件。这个半成品可以跟任何组件相结合，它会把读写接口传给任何的组件，这就是connect的意义。
封装Provider和createStore
1.createStore的用法
创建store
createStore(reducer,initState)
打开redux.js
1.store里面的数据(state)不应该是写死的，redux不应该知道外面的数据是怎样的。
2.reducer也不应该是写死的，如果我们不知道数据，理论上我们应该不可能知道如何创建新的数据。
所以我们应该让state和reducer是从外部传进来的。
使用API createStore
redux.js
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 store = {
state: undefined,
reducer: undefined,
}
export const createStore = (reducer, initState) => {
store.state = initState
store.reducer = reducer
return store //return
}
index.js
import { appContext, createStore, connect } from "./redux"
const reducer = (state, { type, payload }) => {
if (type === 'updateUser') {
return {
...state,
user: {
...state.user,
...payload
}
}
} else {
return state
}
}
const initState = {
user: { name: 'frank', age: 18 },
group: { name: '前端组' }
}
const store = createStore(reducer, initState)
export const connect = (selector, mapDispatchToProps) => (Component) => {
return (props) => {
const dispatch = (action) => {
setState(store.reducer(state, action)) //用到reducer的改为store.reducer
}
}
createStore是用来方便用户把初始化状态以及reducer传到我们的redux里。
现在我们就完成了对createStore的创建。
redux.js export了三个变量:createStore用来创建store，connect用于把组件和store连起来，appContext是上下文，用于在任何地方读取store。
封装Provider
关于上下文，redux文档中是这样写的：
<Provider store={store}>
</Provider>
如何封装Provider变成redux文档中的写法？
<appContext.Provider value={store}>
<大儿子 />
<二儿子 />
<小儿子 />
</appContext.Provider >
方法:
1.封装Provider,Provider应该是一个组件，因为它可以接受属性。
redux.js
export const Provider = ({ store, children }) => { //封装Provider
return (
<appContext.Provider value={store}>
{children}
</appContext.Provider >
)
}
2.使用上下文
index.js
import { Provider, createStore, connect } from "./redux"
export const App = () => {
return (
<Provider store={store}>
<大儿子 />
<二儿子 />
<小儿子 />
</Provider >
)
}
目前我们的redux和真正redux的接口几乎是一致的，通过手写redux,你基本上已经完全理解redux的思想了。
点击 我的博客 查看更多文章
