0

我是 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;

有什么建议么？我想重复一遍我是新来的:)

4

1 回答 1

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 语句中定义相同的变量，它们实际上是在相同的范围内。case您可以使用不同的变量名或在s 语句中添加花括号：

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;
    }
}
于 2020-06-11T15:08:50.773 回答