React的中间件redux-thunk的使用

针对react而言可以使用 middleware中间件来处理 异步action

1

第一步 安装

npm install from redux-thunk --save

(saga)

第二步引入 store/index.js

import thunk from "redux-thunk"

第三步 改写createStore

const store = createStore(goodsReducer,applyMiddleware(thunk));

第四步 改写异步方法

const asyncAddGoods=(info)=>{

    return (dispatch)=>{

        setTimeout(()=>{
            dispatch(addGoods(info));
        	},5000)
    	}
}

export {asyncAddGoods}

第五步 使用

const mapDispatchToProps = {
    addGood:asyncAddGoods 
}

整段如下

import {asyncAddGoods} from "../action/goodsAction"

export class Home extends Component {

    render() {
        return (
            <div>
                <h1>我是来自stroe中的{this.props.title}</h1>
                <button onClick={()=>{
                    this.props.addGood({id:9,goodsname:"6666"})
                }}>加法</button>
            </div>
        )
    }  
}