Redux的使用

flux进阶版 flux编写、维护麻烦

工作流程

redux的工作流程

1、组件发送action 2、action经过store传到reducers 3、reducers修改store的数据 4、store数据修改后触发更新

安装

npm i redux -S

使用

store/index.js

import {createStore} from "redux"
import reducer from "reducer"

const store = createSotre(reducer)
export store

store/reducer.js

const defaulteState{ //存放初始状态
    n
}
export default (state=defaultState, action)=>{
    switch(action.type){
        case "":
            let numState = JSON.parse(JSON.stringify(state))
            numState.n++;
            return newState;
    }
    return state; //this.state = store.getState()
}

reducer的三个特点：

1、必须定义一个默认的state（单一数据源） 2、必须返回纯函数 3、state为可读但不可修改

store上的方法

store.dispatch(action) 触发action

store.getState() 获取state

store.subscribe(event) 订阅 event应包含this.setState

模块化

引用

import { combineReducers } from "redux"
const reducer = combineReducers({
    module1,
    module2
})

使用

this.state.module1

中间件

中间件处理器（applyMiddleware）

在action派发后，state立即修改，这是同步；反之为异步 而异步action存在时，需要一个处于action与reducer之间的应用来进行处理，这就是中间件

redux-promise-middleware

npm install redux-promise-middleware -S

store.js

import { createStore ,combineReducers, applyMiddleware } from "redux";
import reducer from "./reducer"
import reduxPromise from "redux-promise-middleware";

//通过applyMiddleware使用中间件
const store = createStore(reducer, applyMiddleware(reduxPromise));

export default store;

actionCreator.js

//处理异步的action
import {fetch as fetchPolyfill} from 'whatwg-fetch'
export const getMovie = ()=>({
    type:"GET_MOVIE",
    payload: new Promise(resolve=>{
        fetchPolyfill("/ajax/movieOnInfoList?token=")
            //未处理的结果集
            .then((res)=>res.json())
            .then((data)=>{
                resolve(data);
            })
    })
})

App.js

import store from "@store"
import { getMovie } from "@actions/actionCreator"
componentDidMount() {
    store.dispatch(getMovie())
}

reducer.js

const defaultState = { movieList: [] }
export default (state=defaultState,action)=>{
    console.log(action)
    switch (action.type) {
        case "GET_MOVIE_FULFILLED": //使用该中间件需要注意会自动给actionde的type添加后缀
            console.log(action.payload.movieList)
    }
    return state;
}

redux-thunk

npm install redux-thunk -S

store.js

import { createStore ,combineReducers, applyMiddleware } from "redux";
import reducer from "./reducer"
import reduxThunk from "redux-thunk";

//通过applyMiddleware使用中间件
const store = createStore(reducer, applyMiddleware(reduxThunk));

export default store;

App.js

componentDidMount() {
    store.dispatch(getMovieAsync())
}

import {fetch as fetchPolyfill} from 'whatwg-fetch'

let getMovie = (val)=>({
    type:"GET_MOVIE",
    value:val
})

export const getMovieAsync = ()=>{
    return (dispatch)=>{
        fetchPolyfill("/ajax/movieOnInfoList?token=")
        .then((res)=>res.json())
        .then((data)=>{
            dispatch(getMovie(data));
        })
    }
}

注：action可以是一个函数的形式

redux-saga

dva.js: https://dvajs.com/

优化数据结构

解决reducer中深拷贝对象的问题

origin:

let numState = JSON.parse(JSON.stringify(state)) //耗费性能

resolver:

Immutable ：持久化数据结构（数据不可修改）、链式调用（每次都会返回的immutable对象）

  import immutable from "immutable"
  //创建map
  const map = immutable.Map({ //与ES6的map不同
      a:1,
      b:2,
      obj:{}
  })
  //增
  let map1 = map.set("c",3) //新创建的，不会影响初始值
  let map2 = map.setIn(["obj","name"],"zs")
  //删
  let map3 = mao.delete("a")
  let map4 = map.deleteIn(["obj","name"])
  //改
  let map5 = map.update("a",params=>params=10)
  //let map5 = map.update("a",()=>10)  ?
  let map6 = map.updateIn(["obj","name"],name=>name="ws")
  //查
  let map7 = map.get("a")
  let map8 = map.getIn(["obj","name"])
  //合并
  let map9 =map.merge(map1)
  //转换为原生对象
  let mp10 = map.toObject() //单层次

  immutable.isImmutable(map2)
  map.size()
  immutable.is(map1,map2)

  //创建list
  const list = immutable.List([1,2,3,4])
  //增
  let list1 = list.push()
  //删与改
  let list2 = list.splice(0,1)
  //查
  let list3 = list;
  //合并
  let list4 = list1.concat(list2)
  //转换为原生对象
  let list4 = toArray() //单层次


  //fromJS  深层次转换  可以将所有的原生JS对象转换为immutable对象
  let state = immutable.fromJS({})
  //toJS  深层次转换  将immutable对象转换为原生JS对象

手动封装简易版Redux

redux.js

// 函数的功能： dispatch(派发 事件订阅)  getState(返回state)  subscribe(事件绑定)

export const createStore = (reducer)=>{
    let state; //初始的state

    //事件仓库
    let eventList = [];

    //定义一个初始的action
    const actionTypes = "@@redux/INIT"+Math.random();
    const initAction = {
        type:actionTypes
    }

    let getState = ()=>state;

    let subscribe = (cb)=>{
        eventList.push(cb);
    }

    let dispatch = (action=initAction)=>{
        state = reducer(state,action);

        eventList.map((cb)=>{
            cb();
        })
    }
    dispatch();

    return {
        getState,
        dispatch,
        subscribe
    }
}