Redux源码解析及复现

复现redux

本项目对redux进行一个简单复现，下面介绍api、实现及其作用

芝士点

• HOC，高阶组件
• 发布-订阅模式
• React Context
• 函数柯里化

---

• state：redux保存的总数据
• reducer：统一更改 state 的函数，通过 type 值对应不同的更改操作
• listeners：储存监听函数列表，通过发布订阅模式通知组件更改数据

Store

• getState：返回 state
• dispatch：接受一个 action，将 state 和 action 传递给 reducer 返回一个 newState 后，传递给 setState 更改 state
• subscribe：接受一个订阅函数，将其推入 listeners 数组，完成订阅过程。返回一个取消订阅的函数，通过闭包保存传入的函数，执行时再将其从监听函数数组中去除

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

setState

接收 newState 将其赋值给