我刚开始使用 redux 和 react-redux。我观察到一种非常奇怪的行为,无法理解它。
我正在尝试这样的事情。
const fetchedFolders = useSelector(state=>{
console.log("redux state = ",state);
return state.fetchedFolders;
});
const updateFetchedFolders = useDispatch();
我有回调函数,它接收一组新的值并将更新存储中的状态。
let appendFoldersToList=(newFolders)=>{
console.log(typeof(newFolders))
if(typeof(newFolders) === undefined)
console.log("go to error");
else{
updateFetchedFolders(setFetchedFolders([...fetchedFolders,...newFolders]));
}
}
这完美地工作并用新值重新渲染列表 但如果我更换线
updateFetchedFolders(setFetchedFolders([...fetchedFolders,...newFolders]));
与
updateFetchedFolders(setFetchedFolders([...newFolders]));
它不会重新渲染并且仍然显示旧列表。但是在控制台中,我可以看到数据已更新。
我不明白为什么它会在第一种情况下重新渲染,而在第二种情况下不会。
这就是我的减速器的样子:-
export const reducer = (state=initialState, action)=>{
switch(action.type){
case 'SET_FOLDERS': return {
...state,
fetchedFolders:[...action.payload]
}
}
}
这是我的动作创建者:-
export const setFetchedFolders = (payload)=>{
return {
type:'SET_FOLDERS',
payload:payload
}
}
这是我的初始状态:-
const initialState = {
fetchedFolders:[],
}
我不认为我没有改变状态。
我的数组看起来像这样::-
[
{name:cats, id:SOME_ID},
{name:dogs, id:SOME_ID}
]