什么是redux
redux是JavaScript 状态容器,提供可预测化的状态管理。
###redux的设计思想:
- web应用是一个状态机,视图与状态一一对应。
- 所有的状态,保存在一个对象里面
redux 有三个准则:
- 单一数据源 :
整个应用状态,都应该被储存在单一的store的中 - 只读状态:
唯一可以修改状态的方法,就是发送(dispatch)一个动作(action) - 使用纯函数去修改状态:
(纯函数:纯函数返回值只有参数决定,不依赖于系统状态(例如Math.random()就不是纯函数))
redux的基础
- store
store是redux库中的createStore方法生成的一个对象,这个对象中存储我们的共有数据。import {createStore} from 'redux'; import reducer from './reducer' var store =createStore(reducer); export default store;
- state
要获取store中的所存储的数据,需要调用方法:store、getState(),state就是storegetState()获取的数据。将n的值赋值给list:list: store.getState().n
- action
action用来描述的是用户行为,它是一个对象,redux通过dispatch这个action来更改state。incAction(index) { return { type: INCREMENT, index:index } }
- store.dispatch()
在redux中,触发用户行为的方式只有一个store.dispatch(),这也是唯一一种更改数据的方式。store.dispatch(actionCreator.incAction(1))
- reducer
reducer就是一个纯函数。当用户进行dispatch了,数据要进行变化,reducer就是用来对数据进行处理。var initState = {// 状态的初始值 n: 5 } var reducer = (state = initState, action) => { //state 数据 action 动作 console.log("run reducer") return state } export default reducer
- store.subscribe()
subscribe函数,是用来注册一个监听函数的,每当state发生改变的时候,subscribe注册的函数就会被触发。调用change方法store.subscribe(this.change)