redux的中间层 --reactjs学习

Posted 2020-08-23 winters1992

React只负责UI层，也就是我们通常在MVC框架中 所说的View层，所以在使用React开发中 我们得引入Redux

负责Model

一开始学习Redux的中间层 有点 摸不到头，

其实只要你注意观察，这个所谓的middlerware其实就是一个 责任链

 

import { applyMiddleware, createStore } from "redux";

const reducer = (initialState=0, action) => {
  if (action.type === "INC") {
    return initialState + 1;
  } else if (action.type === "DEC") {
    return initialState - 1;
  } else if (action.type === "MULT") {
    throw new Error("AHHHH!!");
  }
  return initialState;
}

const logger = (store) => (next) => (action) => {
  console.log("Logged", action);
  return next(action);//打印action 然后将调用 next函数 将action对象 交给 责任链上的下一个处理函数
};


const errorHandler = (store) => (next) => (action) => {
  try {
    return next(action);//同上，先try catch 然后把action对象 交给责任链上的下一个处理函数
  } catch(e) {
    console.log("ERROR!", e);
  }
};


const middleware = applyMiddleware(
  logger,
  errorHandler
)
const store = createStore(reducer, middleware)

store.subscribe(() => {
  console.log("store changed", store.getState());
})

store.dispatch({type: "INC"})
store.dispatch({type: "INC"})
store.dispatch({type: "INC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "MULT"})
store.dispatch({type: "DEC"})

 

-------------

下面是异步IO的责任链设计

 

import { applyMiddleware, createStore } from "redux";
import axios from "axios";
import logger from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";

const initialState = {
  fetching: false,
  fetched: false,
  users: [],
  error: null,
};

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case "FETCH_USERS_PENDING": {
      return {...state, fetching: true}
      break;
    }
    case "FETCH_USERS_REJECTED": {
      return {...state, fetching: false, error: action.payload}
      break;
    }
    case "FETCH_USERS_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        users: action.payload,
      }
      break;
    }
  }
  return state
}

const middleware = applyMiddleware(promise(), thunk, logger())
//这里加入了thunk promise() logger()
//都是责任链上的某一个环节，promise 负责异步IO 返回的时候 ，
//再一次重新调用dispatch函数，并修改type类型为 FETCH_USERS_PENDING 等情况  本质上就是在我们的type类型上 根据异步IO返回的结果 再一次添加了PENDING等状态 然后再调用dispatch函数分发action

const store = createStore(reducer, middleware)

store.dispatch({
  type: "FETCH_USERS",
  payload: axios.get("http://rest.learncode.academy/api/wstern/users")
})

 

 

reference:

Connecting React & Redux - Redux Tutorial  youtube.com

reactjs 阮一峰 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html