reactjs - 在 React 中使用渲染后从 Redux 计算出的值设置 State 的正确方法

Question

我有一个记录收入、支出和交易的应用程序。每个都有自己各自的组件，在该组件中，我想列出所有财务数据，因此在交易中，列出一个日历月的每笔交易及其详细信息、值(value)等。

在仪表板上，我想呈现:所有交易、支出和收入的总值(value)。然后可以通过从收入中减去支出和交易来支出。

财务数据来自 Redux 存储，然后在仪表板组件上，我已经初始化了总计状态:

constructor(props) {
    super(props);

    this.state = {
        expenditureTotal: 0,
        incomeTotal: 0,
        transactionsTotal: 0
    }
}

我有一个 sumTotal 方法，我传递每个数据 block 来计算总数:

sumTotal(data) {

    return data
        .map((obj) => { return obj.amount; })
        .reduce((prev, next) => { return prev += next; }, 0);

}

我需要用这些总计来更新组件状态，以便我可以计算并显示剩余余额，但我不确定更新状态值的适当方法，因为相关值仅在渲染时通过sumTotal 方法。然后如何使用新总计setState，然后传递到剩余余额组件(我需要创建)。

下面是该组件的相关部分，任何帮助都会很棒。谢谢。

class Transactions extends Component {

    constructor(props) {
        … as code sample above
    }

    componentWillMount() {
        fetch data from redux

    }

    sumTotal(data) {
        … as code sample above
    }

    render() {
        const { transactions, expenditure, income } = this.props;
        const { transactionsTotal, expenditureTotal, incomeTotal } = this.state;

        if (!transactions || !expenditure || !income) {
            return (
                    <div>
                        <p>Loading...</p>
                    </div>
            )
        }

        return (
            <section>
                <h2>Transactions <Link className="actionlink" to="/transactions/add">Add</Link></h2>
                <table className="financials -transactions">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th className="activefilter">Amount</th>
                            <th className="actions">&nbsp;</th>
                            <th className="actions">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.props.transactions.map(
                        (transaction, i) =>
                            <Transaction {...this.props} key={i} transaction={transaction} delete={this.handleDelete} />
                    )}
                    </tbody>
                </table>

                <section className="sumtotal">
                    <Total value={this.sumTotal(transactions)} type="Transactions" />
                    <Total value={this.sumTotal(expenditure)} type="Expenditure" />
                    <Total value={this.sumTotal(income)} type="Income" />

                    <div className="remaining">
                        Display state totals calculation here
                    </div>

                </section>
            </section>
         );
    }
}

function mapStateToProps(state) {
    return {
        transactions: state.transactions.all,
        expenditure: state.expenditure.all,
        income: state.income.all
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}

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

Answer 1

通过将总数添加到状态中，您会为模型引入冗余和不一致的风险。最好有单一的事实来源并从中得出总数。为了避免一直重新计算它们，如果性能是一个问题，您可以使用内存选择器。

看看this page他们使用 reselect 在 redux 中添加内存选择器.