Redux基础

Redux的产生

要理解redux的产生，先要说说MVC模式。每一个view(页面）对应一个model，并由对应的control控制。页面离不开数据的支持，随着单页应用的普及，技术实现的复杂性，页面的状态state管理（用户输入的数据、标签的选中状态、）日趋复杂。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。
Redux的产生则是为了方便开发者管理state，并保持应用的历史状态（返回功能），实现应用状态的可预测。

Redux的原则

• 单一数据源，即唯一store。store中存在包含整个应用state的object tree
• state只读，Redux中不能直接修改state，必须通过action来触发修改
• 使用纯函数来修改state，reducer必须是纯函数

Redux基础概念

state：页面中的状态，类似一个Object
Action：单纯的JavaScript队形，用于更改state中的值
reducer：连接state和Action的函数

Redux的使用方法

页面state：

this.state = { name: 'bamboo', text:'耐得住寂寞才能守得住繁华' }

action:

{
  type: Change,
  text: 'change the text'
}

reducer:接收一个state和一个action，返回新的state

function Change(state, action) {
  if (action.type === 'Chanage') {
    return { name: 'bamboo', text: '偷懒一时爽，一直偷懒一直爽' }；
  } else return state;
  // 遇到未知action时，返回原有的state
}

页面中有一个按钮onClick事件触发Change这个action，改变该页面的state，重新渲染页面，页面内容text变化。