# 一段關(guān)于使用redux-thunk 簡(jiǎn)單明了的代碼
旁白(個(gè)人覺得這 redux-thunk? 東西真沒啥鳥用)
### 先來一段不使用redux-thunk
```javascript
import React, { Component } from 'react'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'
// ---------------------------------------------
// 創(chuàng)建store
const num = (state = 1, e) => {
? ? switch (e.type) {
? ? ? ? case 'add':
? ? ? ? ? ? return state + 1
? ? ? ? case 'subtract':
? ? ? ? ? ? return state - 1
? ? ? ? default:
? ? ? ? return state
? ? }
}
const store = createStore(num)
console.log(store)
// ---------------------------------------------
// 定義和使用組件
class All extends Component {
? ? render () {
? ? ? ? return <Provider store={store}>
? ? ? ? ? ? <But />
? ? ? ? ? ? <Show />
? ? ? ? </Provider>
? ? }
}
class But123 extends Component { // But這是上面的按鈕
? ? render () {
? ? ? ? return <div>
? ? ? ? ? ? <button onClick={this.props.add}>add</button>
? ? ? ? ? ? <button onClick={this.props.subtract}>subtract</button>
? ? ? ? </div>
? ? }
}
const mapStateToProps = state => ({
? ? num: state
})
const mapDispatchToProps = dispatch => ({
? ? add: () => dispatch({type: 'add'}),
? ? subtract: () => dispatch({type: 'subtract'})
})
const But = connect(mapStateToProps, mapDispatchToProps)(But123)
class Show123 extends Component {
? ? render () {
? ? ? ? // console.log(this.props)
? ? ? ? return <div>
? ? ? ? ? ? {this.props.num}
? ? ? ? </div>
? ? }
}
// Show這是下面顯示的數(shù)字，利用connect實(shí)現(xiàn)實(shí)時(shí)獲取store中的數(shù)據(jù)
const Show = connect(mapStateToProps)(Show123)
// ---------------------------------------------
export default All
```
不使用redux-thunk，把同步變異步
```javascript
把const mapDispatchToProps = dispatch => ({
? ? add: () => dispatch({type: 'add'}),
? ? subtract: () => dispatch({type: 'subtract'})
})中的add變成下面的
const mapDispatchToProps = dispatch => ({
? ? add: () => setTimeout(() => dispatch({type: 'add'}), 2000),
? ? subtract: () => dispatch({type: 'subtract'})
})
```
如果使用redux-thunk的話需要改一下
```javascript
// 把import { createStore } from 'redux'? 改為下面的
import { createStore, applyMiddleware } from 'redux'
// 新增引入thunk
import thunk from 'redux-thunk'
// 把const store = createStore(num) 改為下面的
const store = createStore(num, applyMiddleware(thunk))
```
使用redux-thunk的話，還要改一些,下面這些就是重點(diǎn)了
(就是用中間件(或者稱為高階組件)把東西一層又一層的封裝，把你繞暈掉，然后，哇，你就覺得這個(gè)東西好屌啊，好牛逼)
```javascript
// 把const mapDispatchToProps = dispatch => ({
? ? add: () => dispatch({type: 'add'}),
? ? subtract: () => dispatch({type: 'subtract'})
})改為下面的
const mapDispatchToProps = (dispatch) => ({
// value是調(diào)取add傳的參數(shù),getState可以獲取數(shù)據(jù)
? ? add: value => dispatch((dispatch, getState) => {
? ? ? ? console.log(value)
? ? ? ? console.log(getState())
? ? ? ? setTimeout(() => dispatch({type: 'add'}), 3000)
? ? }),
? ? subtract: () => dispatch({type: 'subtract'})
})
//value傳參可以這樣傳
把class But123 extends Component { // But這是上面的按鈕
? ? render () {
? ? ? ? return <div>
? ? ? ? ? ? <button onClick={this.props.add}>add</button>
? ? ? ? ? ? <button onClick={this.props.subtract}>subtract</button>
? ? ? ? </div>
? ? }
}改為下面的
class But123 extends Component { // But這是上面的按鈕
? ? render () {
? ? ? ? return <div>
? ? ? ? // 加了.bind(null, 123)，這樣寫在性能優(yōu)化上不好，為了方便理解，就這樣寫了
? ? ? ? ? ? <button onClick={this.props.add.bind(null, 123)}>add</button>
? ? ? ? ? ? <button onClick={this.props.subtract}>subtract</button>
? ? ? ? </div>
? ? }
}
```
就是上面這段代碼是重點(diǎn)，為啥說是重點(diǎn)，簡(jiǎn)單明了的可以發(fā)現(xiàn)redux-thunk 這東西沒啥鳥用，
就是封裝，多包幾層，繞死你
