redux

redux状态管理库像外暴露了6个方法：createStore,combinReducers,applyMiddleware,bindActionCreators,componse

action

action本质上就是一个对象，它一定有一个名为type的key 如{type: 'add'},{type: 'add'}就是一个action
但是我们只实际工作中并不是直接用action ，而是使用action创建函数，顾名思义action创建函数就是一个函数，它的作用就是返回一个action动作

function add() {
    return {type: 'add'}
}

reducer

reducer其实就是一个函数，它接收两个参数，第一个参数是需要管理的状态state，第二个是action。reducer会根据传入的action的type值对state进行不同的操作，然后返回一个新的state，而不是在原有state的基础上进行修改,但是如果遇到了未知的（不匹配的）action，就会返回原有的state，不进行任何改变。

function reducer(state = {money: 0}, action) {
    switch (action.type) {
        case 'add':
            return Object.assign({}, state, {money: state.money + 1});
        case 'subtract':
            return {...state, ...{money: state.money - 1}};
        default:
            return state;
    }
}

store

store是一个状态树，它包含了整个redeux应用的所有状态

// 我们使用redux提供的createStore方法生成store
import {createStore} from 'redux'
const store = createStore(reducer)

store提供了几个方法供我们使用，下面是我们常用的3个：

store.getState();//获取整个状态树
store.dispatch();//改变状态，改变state的唯一方法
store.subscribe();//订阅一个函数，每当state改变时，都会去调用这个函数

createStore的代码片段

//getState(), subscribe, dispatch
export const createStore = (reducers, enhance) => {
  let state = {} // 状态数据
  let listeners = [] // 收集listener
  if (enhance) {
    return enhance(createStore)(reducers) //返回增强后的store
  }
  // 获取state数据的方法
  const getState = () => {
    return state
  }
  const subscribe = (listeners) => { // 变化监听器，每次dispatch的时候，都会去执行这个listener函数
    listeners.push(listeners)
  }

  const dispatch = (action) => { // 分发action，执行reducer操作，产生新的state数据
    state = reducers(state, action)
    listeners.forEach(l => l())
  }

  dispatch(({type: '@INIT-REDUX'})) // 分发一个初始化的action
  return {getState, subscribe, dispatch}
}

接下来演示一个redux的完整应用，并且说明这三个方法该怎么用

import {createStore} from 'redux'

//定义常量方便维护
const ADD = '+', SUBTRACTION = '-'

function reducer(state = {money: 0}, action) {
  switch (action) {
    case ADD:
      return {...state, ...{money: state.money + 1}}
      break
    case SUBTRACTION:
      return {...state, ...{money: state.money - 1}}
      break
    default:
      return state
  }
}

//action创建函数，返回了一个action
function add() {
  return {type: ADD}
}

function subtraction() {
  return {type: SUBTRACTION}
}

// 创建一个状态树
const store = createStore(reducer)

// 不使用subscribe，每次执行都需要手动去打印才知道数据是否有更新
//store通过dispatch这个方法，并且传入action作为参数，对store进行了改变
store.dispatch(add())
console.log(store.getState())//{money: 1}，reducer接受到了 '+' 这个命令，就增加了一块钱
store.dispatch(subtraction())
console.log(store.getState())//{money: 0}，reducer接受到了 '-' 这个命令，又减少一块钱
store.dispatch({type: '打劫，我要100元'})
console.log(store.getState())//{money: 0}，reducer接受到了一个不识别命令，返回原有的state

// 使用subscribe
function listen() {
    //打印改变后的状态
    console.log(store.getState());
}
store.subscribe(listen)

//store通过dispatch这个方法，并且传入action作为参数，对store进行了改变
store.dispatch(add());
store.dispatch(subtraction());
store.dispatch({type: '打劫，我要100元'});


/*控制台的打印结果如下：
{money: 1}
{money: 0}
{money: 0}*/

subscribe: 来订阅一个事件,可帮助我们在每次dispatch后都要console.log()后才能知道改变后的状态

function listen() {
    console.log(store.getState())
}

store.subscribe(listen)

一个应用只能有一个store，这个时候就会有一个问题 ，如果有多个reducer分别来处理不同的状态，而createStore是能接受一个reducer，这个时候我们就需要redux提供的combineReducers方法来将多个reducer结合成一个reducer

import {combineReducers} from 'redux'

const reducerFamily=combineReducers({
    reduceSon,
    reduceDaughter,
    reducerFather,
    reducerMother
})
const store = createStore(reducerFamily)