![](/img/trans.png)
[英]How to access async function from Redux Action passed into 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.