我是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中改变状态total.我不明白为什么我的变量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;
我想重复一下,我是个新手。)
对于你的第一个问题,我建议你分两步初始化你的状态。
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}
})()
对于你的第二个问题,如果我理解的不错,这是一个范围问题。一个范围在 脚本语言 大括号之间 {}
. 在你的 switch
case
所以,如果你在多个变量中定义了同一个变量,你不能使用大括号(但使用一些大括号是很不寻常的)。case
的语句,它们实际上是在同一个范围内。你可以使用一个不同的变量名,或者在你的 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;
}
}