Redux学习Action Reducer store

#Redux

流程

action → dispatch →  store → reducer

Action：描述要做的事情

1.action是一个plain-object（平面对象）

　　1.它的__proto__必须指向object.prototype

2.action中，必须有type属性,该属性用于描述操作类型，通常使用payload属性表示附加数据（没有强制要求）

const action = {
    type: actionType.INCREASE，
　　 payload：1
}

3.在大型项目中，由于操作类型特别多，为了避免硬编码，将type类型用常量表示。

export const INCREASE = "increase";
export const DECREASE = "decrease";

4.为了方便传递action，通常会使用action创建函数来创建actiion

　　1.action创建函数应该为一个纯函数

　　　　1.不能以任何形式改动参数

　　　　2.不可以异步

　　　　3.不可以对外部环境造成影响

 

import * as actionType from './action-type'
export function getIncreaseAction() {
    return {
        type: actionType.INCREASE
    }
}

export function getDecreaseAction() {
    return {
        type: actionType.DECREASE
    }
}

5.为了方便利用action创建函数来分发（触发）action，redux提供了一个函数

bindactionCreators()   ,该函数用于增强action创建函数的功能，不仅能创建action对象，并且还可以直接自动分发

import { createStore, bindActionCreators } from 'redux'
import * as actionType from '../action/action-type'
import * as numberActions from '../action/number-action'
/**
 * reducer本质上就是一个普通函数
 * @param state 之前仓库中的状态（数据）
 * @param action 描述要做什么对象
 */
function reducer(state, action) {
    if (action.type === actionType.INCREASE) {
        return state + 1
    }
    else if (action.type === actionType.DECREASE) {
        return state - 1
    }
    return state
}

//创建共享仓库
const store = createStore(reducer, 10);
//第一个参数，时action创建函数的合并对象，，第二个参数时仓库的dispatch函数
//得到一个新对象，新对象中的属性名与第一个参数的属性名完全一致。
const bindAction = bindActionCreators(numberActions, store.dispatch)

console.log(store.getState())
//获取到action并且直接分发，不用在调用dispatch
bindAction.getIncreaseAction();

// store.dispatch(action);

console.log(store.getState())

Reducer（改变数据的函数）

1.一个数据仓库，有且只有一个reducer，一个工程，通常只有一个数据仓库，因此一个系统，中有一个reducer，

2.为了方便管理，一般会创建一个单独的reducer放在单独的文件

3.reducer被调用的时机。

　　1.被store.dispatch，分发了一个action，此时，会调用reducer

　　2.创建store仓库的时候，也会调用一次reducer函数（为了初始化）

　　　　1.可以利用这一点，用reducer初始化状态。

　　　　2.将reducer的state设定的一个默认值

　　3.通常使用switch来进行判断

4.**reducer必须是一个没有副作用的纯函数**

　1.为什么要使用纯函数？

　　纯函数有利于测试和调试

　　有利于还原数据

　　有利于将来和react结合时优化

　2.具体要求

　　1.不能以任何形式改动参数　因此若要状态发生改变，需要返回一个新状态

　　2.不可以异步

　　3.不可以对外部环境造成影响

5.由于在大中型项目中，操作比较复杂，数据解构也比较复杂，因此，需要对reducer进行细分

　　1.redux提供了方法，可以帮助我们更加方便的合并reducer

　　2.combineReducers：合并reducer，得到一个新的reducer，该新的reducer管理一个对象，

 

store：用于保存数据的

createStore方法创建的对象

该对象的成员：

dispatch：分发一个action

getState：得当仓库当前状态

replaceReducer：替换掉当前的reducer

subscribe：增加一个监听器，监听仓库状态改变，分发（dispatch）后执行，该函数会返回一个函数，用于取消监听