繁体   English   中英

如何用正确的方式在`redux`中实现`thunk`处理异步功能?

[英]How to implement `thunk` in `redux` with correct way to handle async function?

这是我的商店,实现了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优势?

现场演示

Thunk是一种中间件,只要您将函数传递给动作创建者而不是对象,它便会起作用。 因此,要分配异步代码,请假定您的组件已正确连接并且映射了dispatchToProps您的异步操作创建者应如下所示:

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

您还可以在dispatch旁边收到一个额外的参数,即getState函数,该参数允许您访问全局状态。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM