如何在 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 has already been declared.

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

如何在 Redux 中更改 rootReducer 中的 initState

How to change initState in rootReducer in Redux

state

reactjs

redux

react-redux

redux-reducers