javascript - React Redux 中的异步 ActionCreator

Question

我是 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。

我现在该怎么办？抱歉发了这么长的帖子。

Answer 1

实际上，我希望 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

    });
});

如果有任何问题，请随时告诉我。