24.redux-thunk的使用

1.github上搜索redux-thunk,他是redux的中间件，作用主要是让dispatch(action) 方法可以传入一个函数，而不一定是action对象

准确的来说是传入的函数的返回值 可以是一个方法或者函数 不一定是action对象 只是这个函数能够接收到dispatch 对象return的时候在执行一下 dispatch(aciton) 这个时候就可以是一个对象了

相当于在dispatch外面装饰了一个方法 这个方法处理了逻辑之后 在执行dispatch（）

这个函数可以return 一个函数 该函数可以接收一个dispatch方法 然后可以实现请求后台数据之后调用dispatch方法改变store值

2.关于如何使用和配置可以参考GitHub上面的文档介绍 ，上面都是英文文档

注意点

renderItem={(item, index) => (<List.Item onClick={() => { props.deleteItem(index) }}

renderItem={(item, index) => (<List.Item onClick={(index) => { props.deleteItem(index) }} //onClick中的index参数不是外部函数的index参数而是事件的event对象，有e.target 可以打印一下

注意变量的作用域问题 外部的index参数 是作用于 整个方法，所以可以直接传入到onClick方法中

 

同时使用thunk 中间件 和redux-devtools-extensions 工具

import { createStore, applyMiddleware, compose } from 'redux';

import thunk from 'redux-thunk'

import reducer from '../reducer/';

//通过官方文档的使用方式

const composeEnhancers =

typeof window === 'object' &&

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

}) : compose;

 

const enhancer = composeEnhancers(

//applyMiddleware(...middleware),

applyMiddleware(thunk),

);

//通过applyMiddleware 使用redux 的中间件thunk

const store = createStore(reducer, enhancer);

// const store = createStore(reducer, applyMiddleware(thunk));

export default store

 

actionCreator //把请求抽出来放到action 中 逻辑清洗 便于自动化测试

export const getToDoList = () => {

return (dispatch) => {

axios.get('/apis/getMv').then((res) => {

console.log('res', res)

dispatch(initItem(res.data));

}).catch(() => {

})

}

}

//如果使用调用方法

componentDidMount = () => {

// axios.get('/apis/getMv').then((res) => {

// console.log('res', res)

// store.dispatch(initItem(res.data));

// }).catch(() => {

// })

store.dispatch(getToDoList())// 传入的可以是一个函数 该函数返回值可以不是Acton对像 而是一个函数

}