如何从 redux-thunk 中的获取操作访问状态？

Question

我是新手。在我的 React 应用程序中，我有一个列出所有产品项目的产品组件。来自服务器的 fetch function 由 redux-thunk 处理。但是我无法访问我的组件中的 state，请注意变量 - 'products' 是 undefined。这样获取数据的方式正确吗？

在我的 Products.js,

import Spinner from '../../components/Spinner/Spinner';
import { connect } from 'react-redux';
import { GetProductDataAction } from '../../redux/Product/Product.actions';

class Products extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            products: [],
        }
    }

    async componentDidMount() {
        const product = await this.props.getProductsData();

        this.setState({
            products: this.state.product,
            loading: false
        })
    }

    render() {
        const { product } = this.state;
        return (
            <>
                {
                    this.state.loading || !this.state.products ?
                        <Spinner />
                        :
                            <section className="products-overview-container">
                                    <div className="product-container">
                                        {
                                            products.map(({ ...otherProps }) => {
                                                return <Product key={otherProps._id} 
                                               {...otherProps} />
                                            })
                                        }
                                    </div>
                            </section>
                }

            </>
        );
    }
}

const mapStateToProps = (state) => ({
    products: state.product,
});

const mapDispatchToProps = (dispatch) => {
    return {
        getProductsData: () => {
            dispatch(GetProductDataAction());
        },
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Products);

在我的 Product.action.jsx,

import axios from "axios";
import ProductActionTypes from './Product.types';

export const GetProductDataAction = () => {
    return async (dispatch) => {
        try {
            const res = await axios.get("http://127.0.0.1:3000/products");
            const { data } = res;
            dispatch({
                type: ProductActionTypes.GET_PRODUCT_DATA_SUCCESS,
                payload: data
            });
            console.log('Getting Tour Data Successfully');
        } catch (error) {
            // error code
        }
    };
};

Answer 1

参考Redux Thunk官方文档

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

这意味着第二个参数应该是getState。您可以从这里访问状态。

Answer 2

这是您需要进行的更改：

class Products extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      products: []
    };
  }

  async componentDidMount() {
    const products = await this.props.getProductsData();

    this.setState({
      products,
      loading: false
    });
  }

  render() {
    const { products } = this.state;
    return (
      <>
        {this.state.loading || !this.state.products ? (
          <Spinner />
        ) : (
          <section className="products-overview-container">
            <div className="product-container">
              {products.length && products.map(({ ...otherProps }) => {
                return <Product key={otherProps._id} {...otherProps} />;
              })}
            </div>
          </section>
        )}
      </>
    );
  }
}

如何从 redux-thunk 中的获取操作访问状态？

How to access the state from the fetching action in redux-thunk?

reactjs

redux

redux-thunk