如何用正確的方式在`redux`中實現`thunk`處理異步功能？

Question

這是我的商店，實現了thunk ：

store/index.js

import { createStore, applyMiddleware } from "redux";
import reducer from "../reducers/";
import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk));
export default store;

這是我的動作：

actions/index ：

export const remove = function(id) {
  return {
    type: "remove",
    payload: setTimeout(function() {
      return id;
    }, 2000)
  };
};

export const add = function() {};

export default { remove, add };

這是我的調度功能：

component/Item.js

import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { remove } from "../actions/";

const Item = props => {
  function removeTrigger() {
    props.remove(props.item.id);
  }
  return (
    <li>
      {props.item.name} <button onClick={removeTrigger}>Delete</button>
    </li>
  );
};

function mapAction(dispatch) {
  return bindActionCreators({ remove }, dispatch);
}

export default connect(
  null,
  mapAction
)(Item);

在單擊delete按鈕時，我收到控制台消息。 但是ID不會被刪除。 有thunk幫助我在這里正確地實現重thunk優勢？

現場演示

Answer 1

Thunk是一種中間件，只要您將函數傳遞給動作創建者而不是對象，它便會起作用。 因此，要分配異步代碼，請假定您的組件已正確連接並且映射了dispatchToProps您的異步操作創建者應如下所示：

     export const remove = function(id){
         return function(dispatch){
             let id = null
             setTimeout(()=> {
                id = 1
                dispatch({type: 'remove', payload:id})
             }, 3000)
         }
    }

您還可以在dispatch旁邊收到一個額外的參數，即getState函數，該參數允許您訪問全局狀態。