如何在 Redux 中更改 rootReducer 中的 initState

Question

我是 Redux 的新手，我想知道是否可以根据 initState 中的另一种状态更改一种状态？

const initState = {
    expenses:[
        { key: '1', sum: '100'},
        { key: '2', sum: '200'},
        { key: '3', sum: '300'}
    ],
    total: 0 // I want here total sum from state above (100+200+300)
}

// let totalSum = initState.expenses.reduce((prev,next) => prev + Number(next.sum),0);
// console.log(totalSum) 

=> 在这里我看到了总数，但如果我把它放在 initState 中，我什么也得不到

对我来说其他问题是 rootReducer 中的更改状态总数。 我不明白为什么我的变量 let totalSum 在这两种情况下都不起作用？如果我提交其中一个，它适用于一种情况，如果两者都未提交，那么我会收到错误 totalSum 已经被声明。

const rootReducer = (state = initState, action) => {
    switch(action.type){
        case 'DELETE_COST':
            let newExpenses = state.expenses.filter(cost => {
                return action.key !== cost.key
            })

            // let totalSum = state.expenses.reduce((prev,next) => prev + Number(next.sum),0);
            return {
                ...state,
                total: totalSum,
                expenses: newExpenses
            }
        case 'ADD_COST':
            let totalSum = state.expenses.reduce((prev,next) => prev + Number(next.sum),0);
            return {
                ...state,
                total: totalSum,
                expenses: [action.cost, ...state.expenses]
            }

        default:
            return state;
    }
}

export default rootReducer;

有什么建议吗？ 我想再说一遍，我是新来的:)

Answer 1

对于您的第一个问题，我建议您分两步初始化您的状态：

const expenses = [
    { key: '1', sum: '100'},
    { key: '2', sum: '200'},
    { key: '3', sum: '300'}
];
const total = expenses.reduce((prev,next) => prev + Number(next.sum),0);
const initState = {expenses, total}

如果您不希望中间变量在模块中可见，可以在函数中进行：

const initState = (() => {
    const expenses = [
        { key: '1', sum: '100'},
        { key: '2', sum: '200'},
        { key: '3', sum: '300'}
    ];
    const total = expenses.reduce((prev,next) => prev + Number(next.sum),0);
    return {expenses, total}
})()

对于您的第二个问题，如果我理解得很好，这是一个范围问题。 JavaScript 中的作用域是大括号 {} 之间的所有内容。在您的switch/case 中，您不使用大括号（但使用一些大括号是不常见的），因此如果您在多个cases 语句中定义相同的变量，它们实际上是在相同的范围内。您可以使用不同的变量名称或在 cases 语句中添加花括号：

const rootReducer = (state = initState, action) => {
    switch(action.type){
        case 'DELETE_COST': {
            let newExpenses = state.expenses.filter(cost => {
                return action.key !== cost.key
            })

            let totalSum = state.expenses.reduce((prev,next) => prev + Number(next.sum),0);
            return {
                ...state,
                total: totalSum,
                expenses: newExpenses
            }
        }
        case 'ADD_COST': {
            let totalSum = state.expenses.reduce((prev,next) => prev + Number(next.sum),0);
            return {
                ...state,
                total: totalSum,
                expenses: [action.cost, ...state.expenses]
            }
        }
        default:
            return state;
    }
}