自定义redux库

自定义redux库

redux语法功能分析

1. redux 库向外暴露下面几个函数
   • createStore(): 接收的参数为 reducer 函数, 返回为 store 对象
   • combineReducers(): 接收包含 n 个 reducer 方法的对象, 返回一个新的 reducer 函数
2. store 对象的内部结构
   • getState(): 返回值为内部保存的 state 数据
   • dispatch(): 参数为 action 对象
   • subscribe(): 参数为监听内部 state 更新的回调函数

实现createStore()

实现createStore()的功能

/** * redux库主模块 * 1. redux 库向外暴露下面几个函数 - createStore(): 接收的参数为 reducer 函数, 返回为 store 对象 - combineReducers(): 接收包含 n 个 reducer 方法的对象, 返回一个新的 reducer 函数 2. store 对象的内部结构 - getState(): 返回值为内部保存的 state 数据 - dispatch(): 参数为 action 对象 - subscribe(): 参数为监听内部 state 更新的回调函数 */

/** * * 根据指定的reducer函数建立一个store对象 */
export function createStore(reducer) { //接收一个reducer函数

  //用来存储内部状态数据的变量,初始值为调用reducer函数返回的结果(外部指定的默认值)
  let state = reducer(undefined, { type: '@@redux/init' })
  //用来存储监听state更新回调函数的数组容器
  const listeners = []
  
  /** * 返回当前内部的state数据 */
  function getState() {
    return state
  }
  /** * 分发action * 1.触发reducer调用，获得新的state * 2.保存新的state * 3.调用全部已存在的监视回调 * */
  function dispatch(action) {
    // 1.触发reducer调用，获得新的state
    const newState = reducer(state, action)
    // 2.保存新的state
    state = newState
    
    // 3.调用全部已存在的监视回调
    
    listeners.forEach(listener => listener())
  }
  /** * 绑定内部state改变的监听回调 * 能够给一个stort绑定多个监听 */
  function subscribe(listener) {
    //保存到缓存Listener的容器数组中
    listeners.push(listener)
    console.log(listeners)
    console.log('触发subscribe')
  }
  //返回store对象
  return {
    getState,
    dispatch,
    subscribe
  }
}
/** * * 整合传入参数对象中的多个reducer函数,返回一个新的reducer * 新的reducer管理的总状态:{r1:state1,r2:state2} */
export function combineReducers(reducers) {
  return (state, action) => {

  }
}
复制代码

实现combineReducers

/** * * 整合传入参数对象中的多个reducer函数,返回一个新的reducer * 新的reducer管理的总状态:{r1:state1,r2:state2} * reuscers的结构： * { * count: (state=2,action) => 3 * user: (state = {}, action) => {} * } * 要获得的总状态的结构 * { * count:count(state.count,action), * user:user(state.user,action) * } */
// const obj = {
// count: (state = 2, action) => 3,
// user: (state = {}, action) => { }
// }

/** * forEach版本 */

export function combineReducers(reducers) {
  //返回一个新的总reducer函数
  //state:总状态
  return (state = {}, action) => {
    //准备一个总状态空对象
    const totalState = {}
    //执行reducers中每一个reducer函数获得一个新的子状态，并添加到总状态空对象
    Object.keys(reducers).forEach(key => {
      totalState[key] = reducers[key](state[key], action)
    })
    return totalState
  }
}
/** * reduce版本 */
// export function combineReducers(reducers) {
// //返回一个新的总reducer函数
// //state:总状态
// return (state = {}, action) => {
// //执行reducers中每一个reducer函数获得一个新的子状态，并封装一个对象容器
// const newState = Object.keys(reducers).reduce((preState, key) => {
// preState[key] = reducers[key](state[key], action)
// return preState
// }, {})
// return newState
// }
// }

//简洁版本
export function combineReducers(reducers) {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce((pre, key) => {
      pre[key] = reducers[key](state[key], action)
      return pre
    }, {})
  }
}

复制代码

自定义redux-react

1.react-redux 向外暴露了 2 个 API

• Provider 组件类

• connect 函数

2.Provider 组件

• 接收 store 属性

• 让全部容器组件均可以看到 store, 从而经过 store 读取/更新状态

3.connect 函数

接收 2 个参数: mapStateToProps 和 mapDispatchToProps

mapStateToProps: 为一个函数, 用来指定向 UI 组件传递哪些通常属性

mapDispatchToProps: 为一个函数或对象, 用来指定向 UI 组件传递哪些函数属性

connect()执行的返回值为一个高阶组件: 包装 UI 组件, 返回一个新的容器组件

容器组件会向 UI 传入前面指定的通常/函数类型属性

代码

/** * react-redux库的主模块 * 1) react-redux 向外暴露了 2 个 API a. Provider 组件类 b. connect 函数 * 2) Provider 组件 * 接收 store 属性 * 让全部容器组件均可以看到 store, 从而经过 store 读取/更新状态 * 3) connect 函数 * 接收 2 个参数: mapStateToProps 和 mapDispatchToProps * mapStateToProps: 为一个函数, 用来指定向 UI 组件传递哪些通常属性 * mapDispatchToProps: 为一个函数或对象, 用来指定向 UI 组件传递哪些函数属性 * connect()执行的返回值为一个高阶组件: 包装 UI 组件, 返回一个新的容器组件 * 容器组件会向 UI 传入前面指定的通常/函数类型属性 */
import React from 'react'
import PropTypes from 'prop-types'
/** * 用来向全部容器组件提供store的组件类 * 经过context向全部的容器组件提供store */
export class Provider extends React.Component {

  static propTypes = {
    store: PropTypes.object.isRequired //声明接收store
  }
  /** * 声明提供context的数据名称和类型 */
  static childContextTypes = {
    store: PropTypes.object
  }
  /** * 向全部有声明子组件提供包含要传递数据的context对象 */
  getChildContext() {
    return { store: this.props.store }
  }
  render() {
    //返回渲染<Provider> 的全部子节点
    return this.props.children
  }
}

/** * connect高阶函数：接收 mapStateToProps 和 mapDispatchToProps ,返回一个高阶组件函数 * 高阶组件:接收一个UI组件，返回一个容器组件 */

export function connect(mapStateToProps, mapDispatchToProps) {
  //返回高阶组件函数
  return (UIComponent) => {
    //返回容器组件
    return class ContainerComponent extends React.Component {

      /** * 声明接收的context数据的类型 */
      static contextTypes = {
        store: PropTypes.object
      }
      constructor(props, context) {
        super(props)
        console.log('ContainerComponent', context.store)
        //获得store
        const { store } = context
        //获得包含全部通常属性的对象
        const stateProps = mapStateToProps(store.getState()) //而且把state中的数据传递过去

        //将全部通常属性做为容器组件的状态数据
        this.state = { ...stateProps }

        //获得包含全部函数属性的对象
        let dispatchProps
        //判断传递过来的是不是函数
        if (typeof mapDispatchToProps === 'function') {
          //函数的状况
          dispatchProps = mapDispatchToProps(store.dispatch)//而且把dispatch传递过去
        } else { //对象的状况
          dispatchProps = Object.keys(mapDispatchToProps).reduce((pre, key) => {
            const actionCreator = mapDispatchToProps[key]
            pre[key] = (...args) => store.dispatch(actionCreator(...args)) //参数透传
            return pre
          }, {})
        }

        //保存到组件上
        this.dispatchProps = dispatchProps

        //绑定store的state变化的监听
        store.subscribe(() => {  // store内部的状态数据发生了变化
          console.log('11')
          //更新容器组件 ==> UI更新
          this.setState(mapStateToProps(store.getState()))
        })
      }

      render() {
        //返回UI组件的标签
        return <UIComponent {...this.state} {...this.dispatchProps} /> } } } } 复制代码

使用：

和react-redux使用方法同样