redux记录

143 阅读2分钟

目录

1.自述

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。

惟一改变 state 的办法是触发 action,一个描述发生什么的对象。

为了描述 action 如何改变 state 树,你需要编写 reducers

const reducer = (state = 0, action) {
	console.log('go reducer')
	switch(action.type) {
  	case 'increase':
  		return state + 1
      break
    default:
    	return state
  }
}
let store = createStore(reducer) // 此处会打印go reducer。相当于初始化了一次

// 订阅
store.subscribe(() => {
	console.log(store.getState())
})

// 派发 每当执行了dispatch就会触发subscribe的函数执行,有几个subscribe就会执行几个回调函数
store.dispatch({ type: 'increase' }) // 打印2 dispatch的是action,action中必须含有type

你应该把要做的修改变成一个普通对象,这个对象被叫做 action,而不是直接修改 state。

然后编写专门的函数来决定每个 action 如何改变应用的 state,这个函数被叫做 reducer

2.介绍&基础

2.1 三大原则

  • 单一数据源
  • state是只读的:唯一改变state的方法就是触发action
  • 使用纯函数执行修改:通过reducer来描述action如何改变state

2.2 action

  • 很好理解,action就是一个对象{type: '', payload:''}
  • 必须包含type属性
  • 当数据变大时,建议使用单独的文件存放action
  • 也可以创建action创建函数

2.3 reducer

  • reducer是一个纯函数,(preState, action) => newState
  • 只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
  • 不要修改preState,可使用Object.assign或者对象展开运算符返回新的state
  • 在default情况返回默认state,发送一个action会触发多个reducer执行,所以最好action中type是唯一的。

2.4 store

  • redux只有一个单一的store
  • 通过combineReducer融合多个reuducer
  • 有getState, subscribe, dispatch方法,还可以unsubscribe

2.5 数据流

  • 严格的单项数据流

  • 数据的生命周期存在四个阶段

    • 调用store.dispatch
    • Redux store调用传入的reducer
    • 根reducer合成单一state树
    • Redux store返回最新的state树,然后触发subscribe中回调方法

项目应该有个actionCreator创建文件,用于创建同步和异步的action。

同步的actionCreator返回的是一个对象,异步的返回是一个带有dispatch形参的函数。