React中間件

中間件

import {createStore,applyMiddleware} from “redux”;//使用中間件
import reducer from “./reducer/index.js”;
import logger from “redux-logger”;// 能夠在控制檯直觀的看到更改狀態的type類型以及更改狀態前後的值;
import reduxThunk from “redux-thunk”;// 能夠讓redux中的action支持異步；
import reduxPromise from “redux-promise”;//支持promise
// 1. 導入中間件
// 2. 使用中間件

let store = createStore(reducer,applyMiddleware(logger,reduxThunk,reduxPromise));**

export default {
    add(n){
        // 爲了在action中發送請求；
        // 在action中不支持異步的派發動作；
        // 在真實的工作中，異步的請求數據，把請求回來的數據放到store中的state中，在redux想更改數據只能dispatch；
        // let t;
        // setTimeout(()=>{
        //     t={type:types.ADD_NUM}
        // },2000)
        // return t;
        // 有了redux-thunk,action方法可以返回一個函數，並且這個函數執行時，傳遞兩個實參
        return function(dispatch,getState){
            // dispatch==>store.dispatch  getState==>store.getState
            // 在action中發送異步的請求，等請求回來以後再去修改store中的state值；
            setTimeout(()=>{
                dispatch({type:types.ADD_NUM,n:n})
            },2000)
        }
    },
    min(m){
        // payload可以是一個promise的實例；
        // payload :代表的是promise中resolve的結果；
        // resolve是多少，那麼payload的值就是多少
        // return {
        //     type:types.MIN_NUM,
        //     payload:new Promise(function(resolve,reject){
        //         // 這裏支持異步的請求；
        //         // 如果payload返回一個promise實例，那麼會默認pengding狀態到成功態；
        //         // 如果該promise實例沒有then，那麼會將resolve或reject的實參傳遞過去
        //         // 如果promise的實例調用了then方法，那麼根據then方法中返回的數據作爲payload的值；
        //         setTimeout(()=>{
        //            reject(100)
        //         },2000)
        //     }).then(function(val){
        //         // 這個函數是執行的，但是該函數沒有返回值；默認返回undefined；
        //         // 把這個函數的執行結果賦值給了當前對象的payload屬性
        //         //console.log(val);
        //         //return val+1;
        //     },function (val){
        //         console.log(val);
        //         return val;
        //     })
        // }
        // redux-promise 兩種寫法；
        return new Promise(function(resolve,reject){
            setTimeout(()=>{
                // resolve的對象就是dispatch傳遞的action；
                resolve({type:types.MIN_NUM,m})
            },2000)
        })
    }
}
//reducer中的代碼
import {combineReducers} from "redux";
import * as types from "../action-types.js";
let initState = {num:0};
function counter(state=initState,action){
    switch(action.type){
        case types.ADD_NUM:
            return {...state,num:state.num+action.n};
        case types.MIN_NUM:
            return {...state,num:state.num-action.m}
    }
    return state;
}
let reducer = combineReducers({
    counter
});
export default reducer;