解决reudx中的异步问题 applyMiddleware thunk

 applyMiddleware

redux中的异步解决方案

 component中通过dispatch传递action到store中，store通过middleware处理一些功能（异步功能），传递action到reducer，又会返回新的state到store中，store中的state发生改变会触发subscribe来对component重新渲染

redux整个流程本身事同步的

middleware API 来自于redux。redux/applyMiddleware.md at master · reduxjs/redux · GitHub

• 引入方式 import {createStore,applyMiddleware} from 'redux'
• 执行位置 let store = createStore( reducer ,applyMiddleware(test,logger))
• 参数是自定义中间件
  • 中间件函数的写法 是 固定不变的
  • 每个中间件函数内部必须调用next()
  • 中间件函数执行的顺序跟在applyMiddleware() 中的参数有关

    let store = createStore( reducer ,applyMiddleware(test,logger))

  • 虽然中间件可以拓展redux中的应用程序，可以添加异步代码，但是会造成所有的action都会出现异步功能，这不是想要的结果，中间件只是告诉我们， 谁（action）是异步的，谁不是异步的

 

中间件src/store/middleware/logger.js

// function logger({ getState }) {
//     return next => action => {
//       const returnValue = next(action)
//       return returnValue
//     }
//   }
export function logger(store){
    return function(next){
        return function(action){
            console.log('1111')
            next(action)
        }
    }
}
// 添加异步代码
export function logger(store){
    return function(next){
        return function(action){
            let t = setTimeout(() => {
                console.log('1111')
            },2000)
            next(action)
        }
    }
}

中间件 src/store/middleware/test.js

export function test(store){
    return function(next){
        return function(action){
            console.log('2222')
            next(action)
        }
    }
}

store/index.js

import {createStore,applyMiddleware} from 'redux'
import reducer  from './reducer'
import {logger} from './middleware/logger'
import {test} from './middleware/test'
//1. 定义store
let store = createStore( reducer ,applyMiddleware(test,logger))
export default store 

redux-thunk. 中间件解决异步的方法 

将异步代码写在 action中，中间件thunk只是告诉我们，谁（action）是异步谁不是

action 返回的是一个函数而不是一个对象

action.js

// 4. 定义action
// let increment = {type:'increment'}
// let decrement = {type:'decrement'}
// export function increment(){
//     return{
//         type:'increment'
//     }
// }
// export function decrement(){
//     return{
//         type:'decrement'
//     }
// }
export  const increment = (num) => ({ type:'increment',payload:num }) // 同步action
// export  const incrementasync = function(num){
//     return function(dispatch){
//         let t = setTimeout(() => {
//             dispatch(increment(num))
//         },2000)
//     }
// }
export  const incrementasync = (num) => (dispatch) => { //异步action
    let t = setTimeout(() => {
        dispatch(increment(num))
    },2000)
}
export  const decrement = (num) => ({ type:'decrement',payload:num })

export  const fngreen = () => ({ type:'fngreen'})
export  const fnred = () => ({ type:'fnred' })

中间件thunk.js

export function thunk(store){
    return function(next){
        return function(action){
            if(typeof action === 'function'){
                action(store.dispatch)
            }else{
                next(action)
            }
        }
    }
}