react native redux:如何更新切片中的特定值

Question

这是我的redux配置：

userSlice.js

import { createSlice } from "@reduxjs/toolkit";
const initialState = {
name: "",
email: "",
avatar: "",
id: "",
};

export const userSlice = createSlice({
name: "user",
initialState: initialState,
reducers: {
setUser: (state, action) => {
return {
...state,
name: action.payload.name,
email: action.payload.email,
avatar: action.payload.avatar,
id: action.payload.id,
};
},
},
});
export const { setUser, logout } = userSlice.actions;
export default userSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./slices/userSlice";
export const store = configureStore({
reducer: {
user: userSlice,
},
});

app.js

<Provider store={store}>
<Stack.Navigator >
<Stack.Screen options={{headerShown: false}} name="Signin" component={Signin} />
<Stack.Screen options={{headerShown: false}} name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</Provider>      

以下是一些内容：

1. I登录，然后通过fetch的响应将值放入用户切片

const newUser = {
name: oj.name,
email: oj.email,
avatar: oj.avatar,
id: oj.sub,
};
dispatch(setUser(newUser));

2. 登录后，我会以这种方式控制台日志记录这些值：

const user = useSelector((state) => state.user);
console.log(user)   

这就是它所显示的：

Object {
"avatar": "url",
"email": "asd",
"id": "61bcf738e954f7ffc11d507d",
"name": "Asd",
}

我想在不更改其他内容的情况下将name从"name": "Asd"更新为"name": "bill"，这是我的尝试：

const newUser = {                 
name: "bill"
};
dispatch(setUser(newUser));

它起作用，但随后其他属性(电子邮件、头像、id(变得不明确。那么，如何在不影响其他值的情况下更新单个值呢？

Answer 1

您可以使用排列运算符将现有状态与新负载合并。

当前，您覆盖name、email、avatar和id属性：

return {
...state,
name: action.payload.name,
email: action.payload.email,
avatar: action.payload.avatar,
id: action.payload.id,
};

这将只合并包含的属性：

return {
...state,
...action.payload,
};