redux-reactRedux-reduxFirstHistory

redux

createStore

• 作用
  • 创建一个唯一的仓库地址(本质上还是一个对象)
  • 其他所有的api都是给这个对象赋值 查找值 取值的过程
• 入参
  • reducer 管理员函数
  • preloadedState 初始化状态
• 内容
  • 定义一个state 默认值为传进来的初始化状态
  • 定义一个监听数组
  • getState方法
    • 返回仓库状态
  • subscribe
    • 订阅
    • 返回一个取消订阅的函数
  • dispatch
    • 接收用户派发的动作 更新对应的状态
    • 执行reducer函数 把state和action传进去 得到最新的状态
    • 把监听数组内的每一个函数依次执行
    • 返回行为标识
  • 在createStore的时候会先行调用一次dispath 来进行状态初始化
  • dispatch({ type: '@@REDUX/INIT' });
• 返回值
  • return { getState, dispatch, subscribe }

combineReducers

• 作用
  • 对传入createStore方法的reducer函数进行扩充
  • 把各个reducer合并到一个对象里 用命名空间 也就是键值对的形式来区分
• 入参
  • 管理员函数集合
• 内容
  • 返回一个新的管理员函数
    • 根据不同的命名空间找到不同的状态和管理员函数 并进行修改
    • 解构出namespace
    • 定义一个新的state 代替原来的state 避免变量污染
    • 判断namespace存不存在
      • 存在
        • 找到该动作下对应的管理员函数地址
        • 找到该动作下对应的仓库地址
        • 管理员函数执行 把仓库地址和行为标识传进去 并赋值给新状态对应的空间地址
      • 不存在 说明是全局的状态
        • 执行reducers内所有的管理员函数 把所有的状态都刷新一遍
• 返回值
  • 返回nextState 新的空间地址

bindActionCreators

• 作用
  • 绑定action创建者和仓库的dispath派发的动作
• 入参
  • actionCreators 动作标识的管理者 {add:add()}
  • dispath 派发行为的方法
• 内容
  • 创建一个空的对象boundActionCreators
  • 循环actionCreators
    • 得到每一个要派发的行为标识
    • 把行为标识和dispatch方法进行绑定，返回一个新的行为标识
• 返回值
  • 一个根据行为标识自动派发行为的新方法的管理者

applyMiddleware

• 作用
  • 添加中间件
• 入参
  • 中间件集合
• 内容
  • 返回两层匿名函数
  • 根据createStore创建一个仓库
  • 重写之前的dispath方法
  • 定义一个新对象middlewareAPI 供中间件使用
  • map中间件集合 把每个中间件都调用一下 并且传入值middlewareAPI 并且得到结果
  • 管线化调用中间件和原生的dispath方法 并且赋值给新变量dispatch
  • 返回一个新state对象 只不过dispath是重写过的

react-redux

provider

• 作用
  • 让子元素可以使用store变量
  • 返回一个上下文对象

connect

• 作用
  • 让store和组件关联起来
• 入参
  • mapStateToProps
  • mapDispatchToProps
• 内容
  • 返回一个匿名函数
  • 从Provide上下文中解构出store
  • 解构出store的三个方法 getState subscribe dispatch
  • 获取之前的状态
  • 如果状态没有发生变化 就不需要重新映射属性
  • 对于dispatch 要兼容函数和对象的两个写法 就需要用到bindActionCreators
  • 使用react18的新方法useSyncExternalStore 来进行订阅 这样可避免重新订阅
  • 返回一个新的组

useDispatch

• 作用
  • 使用dispatch方法
• 内容
  • 从上下文中拿到store
  • 返回store.dispatch

useSelector

• 作用
  • 函数组件中单独获取仓库中某一个state
• 入参
  • 想要获取的state的key
• 内容
  • 从上下文中拿到store
  • 获取store的getState方法和订阅方法
  • 得到最新的总状态
  • 根据最新的状态找到此状态内对应的子state
  • 使用react18的新方法useSyncExternalStore 来进行订阅 这样可避免重新订阅
  • 返回要查找的状态

useBoundDispatch

• 作用
  • 直接派发函数
• 内容
  • 从上下文中拿到store
  • 返回 bindActionCreators 处理一层的方法 还是为了兼容写法

redux-first-history

HistoryRouter

• 作用
  • 根据history创建一个Router 和react-router的一样
• 入参
  • history 浏览器历史对象 封装完成的history
  • children 子元素
• 内容
  • 创建一个可以更新视图的reacthook 来存放action和location
  • 页面渲染之前监听history更新 更新的话就刷新视图
  • 返回一个Router对象

createReduxHistoryContext

• 作用
  • 创建redux版本的history 上下文
• 入参
  • history 原始的历史对象
• 内容
  • 创建一个router的中间件 createRouterMiddleware
    • 创建一个三层的匿名函数
    • 解析到dispatch这一层
    • 判断行为标识的type是不是CALL_HISTORY_METHOD
      • 是的话就是路由相关的动作
        • 获取行为标识的payload中的参数 交给history来执行
      • 不是的话就说明和路由没有关系 正常执行就可以
  • 创建一个router的管理员函数 createRouterReducer
    • 定义一个初始化状态 绑定了history的动作标识和路径对象
    • 返回一个匿名的管理员函数
    • 判断行为标识.type 是不是 LOCATION_CHANGE
      • 是的话 表示是路径变化 返回值增加两个值 location 和action
      • 不是的话就返回原来的值
  • 创建一个rudux history函数 建立redux和history的关系 createReduxHistory
    • 生成一个特定的路由专属派发对象 自带参数
    • 派发路径更新的行为标识
    • 监听history的变化 每次变化都会派发一次更新路由的行为 重新保存路径 确保不会出错
    • 返回history历史对象

updateLocation

• 作用
  • 派发history不同的方法
• 入参
  • 要派发的行为 push go goback等
• 内容
  • 返回一个匿名函数
    • 内部是一个reducer函数 用了CALL_HISTORY_METHOD 作为调用history的依据