我是 React-Redux 的新手。正在处理一个应用程序。问题是我可能遇到了一些异步执行 Redux actionCreator 的问题。
下面是我的组件。比如，我想从 componentDidMount() 或 onclick 事件监听器调用 actionCreator。
class Dashboard extends PureComponent {
componentDidMount() {
this.props.getProductsAndPackages();
let something = [];
something = this.props.products;
}
....................................
}
或者，函数 this.props.getProductsAndPackages(); 可以是一个 onClick 事件处理程序，它执行相同的操作，上下文相同。我会先解释我的代码后问我的问题。
在我的仪表板容器的下侧:
Dashboard.propTypes = {
getProductsAndPackages: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
.......................
};
const mapStateToProps = (state) => {
return {
.....................
products: state.products.products,
...................
};
};
const mapDispatchToProps = (dispatch) => {
return {
getProductsAndPackages: () => dispatch(getProductsAndPackagesActionCreator()),
};
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Dashboard));
我的 actionCreator 是这样的:
export const getProductsAndPackagesActionCreator = () => {
return (dispatch) => {
dispatch(productsIsLoading(true));
let url = 'xyz';
if(!!localStorage.getItem('_token')) {
const local_token = localStorage.getItem('_token');
const fullToken = 'Bearer '.concat(local_token);
axios.get(url, {headers: {Authorization: fullToken}})
.then(response => {
dispatch(productsIsLoading(false));
if (response.data.statusCode === 200) {
dispatch(productsFetched(true));
dispatch(products(response.data.data));
} else {
dispatch(productsFetched(false));
dispatch(productsErrors(response.data.message));
}
})
.catch(error => {
});
} else {
axios.get(url)
.then(response => {
dispatch(productsIsLoading(false));
if (response.data.statusCode === 200) {
dispatch(productsFetched(true));
dispatch(products(response.data.data));
} else {
dispatch(productsFetched(false));
dispatch(productsErrors(response.data.message));
}
})
.catch(error => {
console.log(error);
dispatch(productsIsLoading(false));
dispatch(productsErrors(error.message));
});
}
};
};
现在，我希望我的 getProductsAndPackagesActionCreator() 返回一个 Promise 或任何允许我的 something 变量获取从服务器返回的实际数据的东西。现在，当我获得实际数据时，行 something=this.props.products 已经被执行，我得到了为 products 设置的 initialValue >.
我知道，每当我收到填充的 products 时，组件都会重新呈现，但这对我的决策没有帮助。
顺便说一句，我正在使用 redux-thunk。
我现在该怎么办？抱歉发了这么长的帖子。
最佳答案
实际上，我希望 getProductsAndPackagesActionCreator() 返回一个 promise ，老实说，这非常简单。我发现如果您只是返回 axios.get() 或axios.post()，它会返回一个 promise 。因此，修改后的代码如下所示:
export const getProductsAndPackagesActionCreator = () => {
return (dispatch) => {
dispatch(productsIsLoading(true));
let url = 'xyz';
if(!!localStorage.getItem('_token')) {
return axios.get(url, {headers: {Authorization: fullToken}})
.then(response => {
............
............
})
.catch(error => {
});
} else {
return axios.get(url)
.then(response => {
...........
...........
})
.catch(error => {
console.log(error);
});
}
};
};
然后，我可以在 componentDidMount() 或任何 onClick 事件中执行如下操作:
this.props.getProductsAndPackages().then(() => {
this.setState({
...this.state,
clicked_product: this.props.product_by_id
}, () => {
//do other stuffs
});
});
如果有任何问题，请随时告诉我。
关于javascript - React Redux 中的异步 ActionCreator，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51723567/