为什么 Redux 存储中的这个变量不在 React 页面的 `this.props` 中？

Question

我有一个变量，我相信该变量已使用 Redux 操作和化简器正确写入我的 Redux 存储。但由于某种原因，它永远不会成为 React 页面上 props 的一部分。根据下面的代码，可能是什么原因？我希望this.props.transactionDetails并在代码块this.state.trans_status中可用render。Redux 存储对于其他变量/页面可以正常运行。

反应页面：

import { get_details } from "../../../appRedux/actions/transAction";

class DonePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showLoader: true,
            transactionDetails: "",
            trans_status: "",
        };
    }

    async componentDidMount() {
        await this.props.get_details('abc1234');
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.transactionDetails !== this.props.transactionDetails) {
            console.log("Inside ComponentDidUpdate");
            // It never arrives here, perhaps suggesting the prop is never created in the store?

            this.setState({
                trans_status: this.props.transactionDetails.trans_status,
            });
        }
    }

    render() {
        console.log(JSON.stringify(this.state.trans_status);
        // returns "" instead of the value of the redux action/reducer
        console.log(JSON.stringify(this.props.transactionDetails);
        // returns undefined instead of the value of the redux action/reducer

        // What am I doing wrong? Why am I not getting the transactionDetails here?
    }
}

const mapStateToProps = (state) => {
    return {
        settings: state.settings,
        // the settings property works fine in this component
        transactionDetails: state.transactionDetails,
    };
};

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

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

还原操作：

export const get_details = (trans_id) => {
    let token = getAuthToken();
    return (dispatch) => {
        axios
            .get(`${url}/get_details/${trans_id}`, {
                headers: { Authorization: `${token}` },
            })
            .then((res) => {
                if (res.status === 200) {
                    console.log(JSON.stringify(res.data.data);
                    // returns {"trans_status":"paid","trans_due":"0"}
                    return dispatch({
                        type: DETAILS_SUCCESS,
                        payload: res.data.data,
                    });
                } else {
                    return dispatch({
                        type: DETAILS_ERROR,
                        payload: res.data.data,
                    });
                }
            })
    }
}

减速器：

import {
    DETAILS_SUCCESS,
    DETAILS_ERROR,
} from "../constants";

const initial_state = {
    transactionDetails: [],
    transactionDetailsError: "",
};

export default function transactionsReducer(state = initial_state, action) {
    switch (action.type) {
        case DETAILS_SUCCESS:
            console.log(JSON.stringify(action.payload));
            // returns {"trans_status":"paid","trans_due":"0"}
            return { ...state, transactionDetails: action.payload };
        case DETAILS_ERROR:
            return { ...state, transactionDetailsError: action.payload };
        default:
            return state;
    }
};

---

更新在减速器索引文件（/reducers/index.js）中我有：

const reducers = combineReducers({
    variousVariables: variablesReducer,
    transactions: transactionsReducer,
});

如果我将其更改为：

const reducers = combineReducers({
    variousVariables: variablesReducer,
    transactionDetails: transactionsReducer,
});

在页面上render，this.props.transactionDetails现在返回数据：

{"transData":[],"transactionDetails":{"transaction_status":"paid","transaction_amount_due":"0"},"transactionDetailsError":"","otherData":"", etc.}

SotransactionDetails嵌套在另一个内部transactionDetails，我需要调用this.props.transactionDetails.transactionDetailsor this.props.transactionDetails.transData。但是，我希望这是this.props.transactions.transactionDetails和this.props.transactions.transData。

有人能解释一下发生了什么事吗？我想我可以将减速器索引文件中的键命名为我喜欢的任何名称，然后定义this.props.anythingilike.

为什么我不能只更改减速器索引文件中的键来获取我正在寻找的内容？我想我还需要更改页面上的某些内容以使其符合我想要的方式？因为现在如果我将减速器索引文件中的键更改为transactions，则this.props.transactions仍位于undefined页面上，而如果该键为transactionDetails则this.props.transactionDetails则返回正确的数据。

Answer 1

我找到了我的问题的解决方案。正如几个人所建议的，有关商店设置的详细信息非常重要，特别是减速器的设置和 的使用combineReducers。

我的减速器的设置包括：

const reducers = combineReducers({
    ...,
    transactions: transactionsReducer,
});

为了使其工作，在页面上我只需要更改：

1--this.props.transactionDetails到this.props.transactions（this.props.transactions.transactionDetails如果需要的话。

2--下面代码块中的最后一行需要是transactions: state.transactions

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