React——第三阶段(2)手动实现Redux

根据胡子大哈的文章学习,感谢大胡分享
胡子大哈-动手实现Redux

什么是Redux

Redux是一种前端架构模式,Flux架构的一种变种。

Redux与React-redux不是一个东西。Redux模式可以和很多种框架结合起来,比如vue、react。React-redux就是Redux与React结合起来的一个库,即Redux架构模式在React.js的体现。

从一个矛盾开始

矛盾:模块组件之间需要共享状态<————>状态可能被任意修改导致不可预料的结果

解决这个矛盾--思路

React.js的做法,将事情搞复杂,提高使用门槛,我们也用这个方法

手动实现Redux的代码

 <body>
    <div id="title"></div>
    <div id="content"></div>
  </body>
/*
 *  思路——将事情变复杂:不可以直接修改数据,只能通过我允许的操作,而且修改的时候必须大张旗鼓的告诉我
 *  通过createStore定义一个store,来进行状态管理,store具有以下属性:
 *  首先要一个state存放共享状态。state状态的监听列表-listeners。
 *     操作方法有:获取state对象-getState,添加监听函数-subscribe(listener),执行action-dispatch(action)
 *  store 
 *  {
 *    state
      listeners
      getState
      subscribe
      dispatch
      reducer(外部传入)
      // 会使用外部传入的reducer

 *  }
 *  reducer(state, action):1.初始化state。2.设置switch case,根据action,返回不同的新state。(具有共享结构的对象)
 *  
 */

/*  知识:
 *  纯函数:一个函数的返回值只依赖于它的参数,并且在执行过程中没有副作用,就称函数为纯函数 
 *    优点:可靠,你传入什么,就传出什么
 *  共享结构对象:最外层不是同一个对象,即新state和旧state不是同一个,内部前后不发生变化的部分指向同一个引用,发生变化的部分,指向不同的引用。
 */

/*  一个性能问题:不要全部渲染,改了哪一部分,就渲染哪一部分。
 *    解决方法:1.渲染判断 2.共享结构的对象:es6语法 ...key
*/

/*
  抽象 store 构建一个createStore函数,生成state和dispatch组合
  观察者模式:监听列表,其中是各种处理函数。每次调用dispatch都会遍历监听列表
*/

function createStore (reducer) {
  let state = null // state状态池
  const listeners = [] // 监听列表
  const subscribe = (listener) => listeners.push(listener) // 传入监听函数的方法
  const getState = () => state // 获取当前state
  const dispatch = (action) => {
    state = reducer(state, action) // 覆盖原对象
    listeners.forEach((listener) => listener()) // 每次dispatch都会遍历监听列表,等价于自动更新
  }
  dispatch({})
  return { getState, dispatch, subscribe }
}

//dom操作方法
function renderApp (newAppState, oldAppState = {}) {
  if (newAppState === oldAppState) return
  console.log('1.App')
  renderTitle(newAppState.title, oldAppState.title)
  renderContent(newAppState.content, oldAppState.content)
}

function renderTitle (newTitle, oldTitle = {}) {
  if (newTitle === oldTitle) return
  console.log('2.1title')
  const titleDom = document.getElementById('title')
  titleDom.innerHTML = newTitle.text
  titleDom.style.color= newTitle.color
}

function renderContent(newContent, oldContent = {}) {
  if (newContent === oldContent) return
  console.log('2.2content')
  const contentDom = document.getElementById('content')
  contentDom.innerHTML = newContent.text
  contentDom.style.color = newContent.color
}

/*  这就是reducer 其实一个纯函数,不允许有副作用。
 *
 *  传入state,action.如果state存在,根据action返回一个新state。
 *  如果state不存在,则进行初始化
 *  reducer的工作(不允许有副作用):
 *  1.初始化
 *  2.计算新state
*/

// 原名:stateChanger
function themeReducer (state, action) {
  if (!state) {
    return {
      title: {
        text: "React.js小书",
        color: "red",
      },
      content: {
        text: "React.js小书内容",
        color: "blur"
      }
    }
  }
  if (!action) {
    console.log('无有效的action')
  }
  switch (action.type) {
    case 'UPDATA_TITLE_TEXT':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATA_TITLE_COLOR':
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}

// 生成store
const store = createStore(themeReducer)
let oldState = store.getState() // 缓存旧的state
store.subscribe(() => {
  const newState = store.getState()
  renderApp(newState, oldState)
  oldState = newState
}) // 加入监听事件

renderApp(store.getState())
store.dispatch({type: 'UPDATA_TITLE_TEXT', text: '《React.js 小书》'})
store.dispatch({type: 'UPDATA_TITLE_COLOR', color: 'blue'})

推荐阅读更多精彩内容