### redux-thunk
– redux-thunk是redux中的一个中间件
– 安装命令 yarn add redux-thunk
– 在store文件夹中的index.js中引入applyMiddleware,这样我们才能使用中间件
– 然后再引入redux-thunk
– 并在createStore中使用applyMiddleware(thunk)
#### 到底生命是redux中间件
– 谁和谁之间
– action和store之间
– 其实中间件就是对dispath一个封装
– 如果传递的是一个函数,会让这个函数先执行再传递给store
– 如果是一个对象,就直接传递给store
– 所以使用thunk中间件以后action可以是一个函数
1 /** 2 * store就像一个图书管理员,在接到组件(借书人)派发的 dispatch(借书人说的话) 时, 3 * 他本身不知道书在什么位置,有没有这本书,需要查询 reducer (图书列表) 4 */ 5 import { createStore, applyMiddleware, compose } from 'redux' 6 import thunk from 'redux-thunk' 7 import todoListReducer from './reducer' // 引入图书列表 8 9 10 // 使用redux-devtools中间件和redux-thunk中间件 11 12 13 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose 14 const enhancer = composeEnhancers( 15 applyMiddleware(thunk) 16 ) 17 const store = createStore( 18 todoListReducer, 19 enhancer 20 ) // 查询图书列表 21 22 23 export default store
### 使用redux-thunk
– 在项目中使用引入使用redux-thunk之后
– 在actionCreators中创建action不再只能创建对象action了,能够创建函数形式的action
– 因为action能是个函数,所以我们可以把异步请求放在action中而不是放在生命周期函数里面
– 项目大的时候逻辑复杂的时候,异步请求放在钩子函数里是不好的
1 import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE, INIT_DATA } from './actionTypes' 2 import mockData from '../mockjs/mock'; 3 import axios from 'axios' 4 5 6 export const getInputChangeValue = (value) => ({ 7 type: CHANGE_INPUT_VALUE, 8 value 9 }) 10 11 12 export const getAddTodoListValue = (item) => ({ 13 type: CHANGE_LIST_VALUE, 14 item 15 }) 16 17 18 export const getDeletTodoListValue = (index) => ({ 19 type: DELETE_LIST_VALUE, 20 index 21 }) 22 23 24 export const initData = (data) => ({ 25 type: INIT_DATA, 26 data 27 }) 28 /** 29 * 因为使用了redux-thunk所以在actionCreators中的箭头函数可以返回一个函数 30 */ 31 export const getToduList = () => { 32 return (dispatch) => { // 这个action返回的是这样一个箭头函数,在使用的时候同样页需要通过dispatch派发,箭头函数中dispath其实就是在派发这个action的时候传递进来的 33 axios.get('http://getTodoList', {dataType: 'json'}).then(res => { 34 const action = initData(res.data.data) 35 dispatch(action) 36 }) 37 } 38 }
### 在组件中使用这个异步请求
– 在componentDidMount函数中使用了
1 /** 2 * 组件就是一个需要借书的人,通过 dispatch 传达 action (书名)给图书管理员(store) 3 */ 4 5 import React, { Component }from 'react'; 6 import { message } from "antd"; 7 import store from './store'; // 引入图书管理员 store 8 import AppUi from './AppUi'; 9 // import mockData from './mockjs/mock'; 10 // import axios from 'axios' 11 // 引入action 12 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue, getToduList } from './store/actionCreators' 13 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes' 14 import "antd/dist/antd.css"; 15 class App extends Component { 16 constructor(props){ 17 super(props) 18 this.state = store.getState() 19 console.log(store.getState()) 20 this.handleInputChange = this.handleInputChange.bind(this); 21 this.addTodoList = this.addTodoList.bind(this); 22 this.handleStroeChange = this.handleStroeChange.bind(this); 23 this.deletTodoList = this.deletTodoList.bind(this); 24 store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人,图书馆书籍的变化 25 } 26 componentDidMount (){ 27 // 引入了actionCreators中的getToduList方法,他返回的是一个函数action 28 const action = getToduList() 29 // 所以这里使用dispact去派发这个action 30 store.dispatch(action) 31 /* 32 axios.get('http://getTodoList', {dataType: 'json'}).then(res => { 33 console.log(res.data.data) 34 this.init(res.data.data) 35 console.log(this.state) 36 }) 37 */ 38 } 39 render() { 40 return ( 41 <AppUi 42 inputValue = {this.state.inputValue} 43 handleInputChange = {this.handleInputChange} 44 deletTodoList = {this.deletTodoList} 45 addTodoList = {this.addTodoList} 46 list = {this.state.list} 47 /> 48 ) 49 } 50 handleInputChange(e) { 51 /* 52 const action = { 53 type: CHANGE_INPUT_VALUE, // 借什么书 54 value: e.target.value 55 } 56 */ 57 const action = getInputChangeValue(e.target.value) 58 store.dispatch(action); // 传达给store 59 console.log(e.target.value) 60 } 61 /* 62 // 数据初始化 63 init(data) { 64 const action = initData(data) 65 store.dispatch(action) 66 } 67 */ 68 // 添加 69 addTodoList() { 70 /* 71 if (this.state.inputValue) { 72 const action = { 73 type: CHANGE_LIST_VALUE, 74 item: this.state.inputValue 75 } 76 store.dispatch(action) 77 } else { 78 message.warning('请输入内容'); 79 } 80 */ 81 if (this.state.inputValue) { 82 const action = getAddTodoListValue(this.state.inputValue) 83 store.dispatch(action) 84 } else { 85 message.warning('请输入内容'); 86 } 87 } 88 // 删除 89 deletTodoList(index) { 90 /* 91 const action = { 92 type: DELETE_LIST_VALUE, 93 value: index 94 } 95 */ 96 console.log(index) 97 const action = getDeletTodoListValue(index) 98 store.dispatch(action) 99 } 100 handleStroeChange() { 101 this.setState(store.getState()) // 每当图书馆有变化的时候,图书管理员(store)通过这个方式告诉借书人(组件) 102 } 103 } 104 export default App;
转载于:https://www.cnblogs.com/boye-1990/p/11468473.html