React-Redux：如何设置状态？

Question

我试图理解别人的代码，但很难理解 Redux 和 React 之间的交互。

在 React 页面上，我调用了一个名为 getSubscriptionPlan 的 Redux 操作。在那个 Redux 操作中，我看到它能够加载正确的数据（下面的 1 点）。这使用了一个减速器，我可以再次确认那里有正确的数据（下面的点 2）。

然后逻辑returns到React页面（点3下方）。我现在希望能够在 Redux 存储中的某个地方找到前面提到的数据。但是，我无法在任何地方找到列出的数据......不在 this.state（我期望的地方），也不在 this.props 中。 reducer 是否可能没有更新存储状态...？

我哪里做错了，我怎样才能让数据指向下面的 3？

React 页面：

import { connect } from "react-redux";
import { getSubscriptionPlan } from "../../../appRedux/actions/planAction";

async componentDidMount() {
    let { planId } = this.state;
    await this.props.getSubscriptionPlan(planId);

    // 3. I can't find the data anywhere here: not inside this.state and not inside this.props.

    this.setState({plan: this.state.plan});
}

componentDidUpdate(prevProps, prevState) {
    if (prevProps.payment.paymentData !== this.props.payment.paymentData) {
        this.setState({
            checkout: this.props.payment.paymentData,
            plan: this.props.payment.paymentData.plan,
        });
    }
}

const mapStateToProps = (state) => {
    return {
        plan: state.plan,
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(
        { getSubscriptionPlan }, dispatch
    );
};

export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(Checkout)
);

Redux 操作：

export const getSubscriptionPlan = (id) => {
    let token = getAuthToken();
    return (dispatch) => {
        axios
            .get(`${url}/getSubscriptionPlan/${id}`, {
                headers: { Authorization: `${token}` },
            })
            .then((res) => {
                if (res.status === 200) {

                    // 1. From console.log(res.data) I know res.data correctly now contains the data

                    return dispatch({
                        type: GET_PLAN_SUCCESS,
                        payload: res.data,
                    });
            })
    };
};

减速器：

export default function planReducer(state = initial_state, action) {
    switch (action.type) {
        case GET_PLAN_SUCCESS:

            // 2. I know action.payload, at this point contains the correct data.

            return { ...state, plan: action.payload };
        default:
            return state;
    }
}

Answer 1

您对 Redux 的工作原理感到困惑。

Redux 不使用 React 组件状态。它单独管理状态，并将该状态作为 props 传递给组件。当您调用 getSubscriptionPlan 时，您将一个事件异步分派给 Redux，Redux 会处理该事件并更新 reducer 中的存储状态。这个状态被传递给连接的组件 mapStateToProps 函数，映射到 props，然后作为 props 传递给你的组件。传递新道具会触发 componentDidUpdate 和组件的重新渲染。

这里有一些关键的事情。

除非您使用从 Redux 传递的 props 显式设置状态，否则 Redux 不会与组件状态交互。
Redux 是异步的。这意味着当你通过 dispatch 更改状态时，更改不会立即在组件中可用，但只有在传递新的 props 时才可用。它是事件驱动的，而不是数据绑定。因此，在您的代码中，您不会在 componentDidMount 中看到 plan 道具，因为当时 componentDidMount 尚未调用 getSubscriptionPlan。

在 didUpdate 之前，您应该会在 componentDidUpdate 和 render 中看到 this.props 中填充的道具。

在使用 React 时，最好将组件视为基本的 props 函数，并附加一些额外的生命周期方法。

React-Redux：如何设置状态？

React-Redux: how to set the state?

reactjs

redux

redux-reducers