化简器不更新状态

Question

我正试图创建一个reducer来更新对象中的属性，但我无法更新和存储新的状态信息

减速器

export default function hideCardNumber(state = INITIAL_STATE, action: Action) { 
if (action.type === 'HIDE_CARDNUMBER') {
return { 
...state,
data: {...state.data, action }}
}
else 
return state
}

操作

export const toggleViewNumberCard = (cardId: number, hideCardNumber: boolean) => {
return {
type: 'HIDE_CARDNUMBER',
cardId,
hideCardNumber,
}
}

调度到行动

function handleToggleViewCardNumber() {
cards.map((card: Card) => {    
if (card.cardId === props.activeCard ) {
dispatch(toggleViewNumberCard(
card.cardId,
!card.hideCardNumber,
))
}
})
}

初始状态

export const INITIAL_STATE = {
activeCard: 0,
data: [
{
cardId: 0,
cardName: 'Card',
cardUsername: 'Name',
cardNumber: '1234 1234 1234 1234',
hideCardNumber: false, <-- Trying to replace this property when reducer update
},
]
}

Answer 1

您需要像这样更新reducer：

const {hideCardNumber, cardId} = action;
return { 
...state,
data: state.data.map(item => item.cardId === cardId ? {...item, hideCardNumber} : item )
}

Answer 2

在现实场景中，cardID将是一个散列。此外，为了在应用程序增长时方便地维护存储数据，INITIAL_STATE应该是这样的。

export const INITIAL_STATE = {
activeCard: 0,
data: {
123456: {
cardId: 123456,
cardName: 'Card',
cardUsername: 'Name',
cardNumber: '1234 1234 1234 1234',
hideCardNumber: false, 
},
}
}

然后减速器将是这样的。

export default function hideCardNumber(state = INITIAL_STATE, action) {
if (action.type === 'HIDE_CARDNUMBER') {
return {
...state,
data: {
...state.data,
[action.cardId]: {
...state.data[action.cardId],
hideCardNumber: action.hideCardNumber
}
}
}
}
else
return state
}

如果activeCard与卡片中的一个ID匹配，则代码将完美工作。

Answer 3

首先，最好将数据放入有效负载中，如：

export const toggleViewNumberCard = (cardId: number, hideCardNumber: boolean) => {
return {
type: 'HIDE_CARDNUMBER',
payload : {
cardId,
hideCardNumber,
}

}}

看起来你有一系列的卡，首先你必须找到你想要用这样的cardid替换的当前卡：

const index = state.data.findIndex(
(card) => cardId === action.payload.cardId
);

然后复制你的旧阵列：

const newArray = [...state.data];

然后将newarray的索引替换为新的hideCardNumber值，如下所示：

newArray[index] = {
...newArray[index],
action.payload.hideCardNumber
};
return {
...state,
data: newArray,
};

我希望它能帮助你