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

Question

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

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));

还原 Action :

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,
                    });
                }
            })
    }
}

reducer :

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;
    }
};

更新 在 reducer 索引文件( /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.}

所以transactionDetails嵌套在另一个 transactionDetails 中我需要调用this.props.transactionDetails.transactionDetails或 this.props.transactionDetails.transData .但是，我希望这是 this.props.transactions.transactionDetails和 this.props.transactions.transData .
有人可以解释发生了什么吗？我想我可以将 reducer 索引文件中的键命名为任何我喜欢的名称，然后定义 this.props.anythingilike 的“路径”。 .
为什么我不能只更改 reducers 索引文件中的键来获取我要查找的内容？我想我还需要更改页面上的某些内容以使其成为我想要的方式？因为现在如果我将 reducers 索引文件中的键更改为 transactions ，然后 this.props.transactions仍然是 undefined在页面上，而如果该键是 transactionDetails然后 this.props.transactionDetails确实返回正确的数据。

Answer 1

我找到了我的问题的解决方案。正如一些人所建议的那样，有关商店设置的详细信息很重要，尤其是 reducer 的设置和 combineReducers 的使用。 .
我的 reducer 的设置包括:

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,
     };
 };