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变化。