React-redux的学习心得（一）

实不相瞒对于我这样的前端小白，去年用到React开发项目的时候也看过React-redux但是说实话没有看他懂，后来用到的框架就是Vue所以没怎么研究React但是最近一直听移动端的朋友说到React-Native所以想重新看看react-redux再看看React-Native。没错我就是这么个善变的女人，哈哈哈，言归正传。
首先我觉学习react-redux的前提是知道什么是react-redux，以及为什么出现react-redux，这样才能真正意识到学习它的必要性。然后在学习它解决了什么问题基础上才能使用它。

1.Redux

1. 共享状态值–state
   举个例子！ 正常情况下多个子孙组件共享父组件的主题颜色themeColor时是这个样子的。
   每层都需要写 props.themeColor，但是假如现在content里面有个按钮想要去改变这个themeColor在没有共享状态概念前就必须通过一层一层传递给index由index去修改themeColor通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。我的天！受不了了，这要是嵌套个几十个层级关系可怎么办啊，所以显然必须需要找到方法去改变这种传递方式。所以就有了context。React.js 的 context 其实像就是组件树上某颗子树的全局变量。
   

2. 提高了修改数据的门槛
   一个可以被不同模块任意修改共享的数据状态就是魔鬼，一旦数据可以任意修改，所有对共享状态的操作都是不可预料的出现问题的时候 debug 起来就非常困难，这就是老生常谈的尽量避免全局变量。
   所以我们需要提高修改数据的门槛，在修改共享状态的时候，我们需要定义一个标准，并且去修改共享状态值。

   function stateChanger (action) {
   switch (action.type) {
   case ‘UPDATE_TITLE_TEXT’:
   appState.title.text = action.text
   break
   case ‘UPDATE_TITLE_COLOR’:
   appState.title.color = action.color
   break
   default:
   break
   }
   }

这样每次修改共享状态值就需要经过stateChanger。

3. 我们就把它抽象出来一个 createStore
   参数是共享状态值以及修改规则，函数里面包含 getState 和 dispatch 函数，方便我们使用。同时我们需要监听数据的变化，因为不仅仅需要改变状态值，还需要渲染到相应的Dom元素中去。

function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    stateChanger(state, action)
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

function renderApp (appState) {
  renderTitle(appState.title)
  renderContent(appState.content)
}

function renderTitle (title) {
  const titleDOM = document.getElementById('title')
  titleDOM.innerHTML = title.text
  titleDOM.style.color = title.color
}

function renderContent (content) {
  const contentDOM = document.getElementById('content')
  contentDOM.innerHTML = content.text
  contentDOM.style.color = content.color
}

let appState = {
  title: {
    text: 'React.js 小书',
    color: 'red',
  },
  content: {
    text: 'React.js 小书内容',
    color: 'blue'
  }
}

function stateChanger (state, action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      state.title.text = action.text
      break
    case 'UPDATE_TITLE_COLOR':
      state.title.color = action.color
      break
    default:
      break
  }
}

const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState())) // 监听数据变化

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色

4. 不希望每次数据改变后所有子组件变化
   通过上面的代码示例你会发现，每次数据变化都会都出触发数据监听重新renderApp。那就会导致每一次所有的Dom元素重新加载。如何才能做到数据没有数据变化的子组件，不重新渲染呢，两步操作
   一在数据渲染前进行新旧值得比较。二，赋值时对象不能指向同一地址

function createStore (state, stateChanger) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = stateChanger(state, action) // 覆盖原对象
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

function renderApp (newAppState, oldAppState = {}) { // 防止 oldAppState 没有传入，所以加了默认参数 oldAppState = {}
  if (newAppState === oldAppState) return // 数据没有变化就不渲染了
  console.log('render app...')
  renderTitle(newAppState.title, oldAppState.title)
  renderContent(newAppState.content, oldAppState.content)
}

function renderTitle (newTitle, oldTitle = {}) {
  if (newTitle === oldTitle) return // 数据没有变化就不渲染了
  console.log('render title...')
  const titleDOM = document.getElementById('title')
  titleDOM.innerHTML = newTitle.text
  titleDOM.style.color = newTitle.color
}

function renderContent (newContent, oldContent = {}) {
  if (newContent === oldContent) return // 数据没有变化就不渲染了
  console.log('render content...')
  const contentDOM = document.getElementById('content')
  contentDOM.innerHTML = newContent.text
  contentDOM.style.color = newContent.color
}

let appState = {
  title: {
    text: 'React.js 小书',
    color: 'red',
  },
  content: {
    text: 'React.js 小书内容',
    color: 'blue'
  }
}

function stateChanger (state, action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      return { // 构建新的对象并且返回
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'UPDATE_TITLE_COLOR':
      return { // 构建新的对象并且返回
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state // 没有修改，返回原来的对象
  }
}

const store = createStore(appState, stateChanger)
let oldState = store.getState() // 缓存旧的 state
store.subscribe(() => {
  const newState = store.getState() // 数据可能变化，获取新的 state
  renderApp(newState, oldState) // 把新旧的 state 传进去渲染
  oldState = newState // 渲染完以后，新的 newState 变成了旧的 oldState，等待下一次数据变化重新渲染
})

renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色

5. reducer函数
   reducer函数其实就是将上述中的appstore以及stateChanger合并到一起。可以将它看成一个纯函数，只负责初始化State以及根据action改变state并返回一个更新后的state。

function themeReducer (state, action) {
  if (!state) return {
    themeName: 'Red Theme',
    themeColor: 'red'
  }
  switch (action.type) {
    case 'UPATE_THEME_NAME':
      return { ...state, themeName: action.themeName }
    case 'UPATE_THEME_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

const store = createStore(themeReducer)
...