如何在redux工具包中存储action.payload

Question

我想将state.name设置为"；Alex"；和age加一后点击登录功能，并设置电子邮件为action.payload。

这是我的用户状态切片

const userSlice = createSlice({
name: "user",
initialState: { value: { name: "", age: 0, email: "" } },
reducers: {
login: (state, action) => {
state.value.name = "Alex"
state.value.age = state.value.age + 1
state.value.email = action.payload
}, 
}
})

这是我的useDispatch

function Login() {
const dispatch = useDispatch()
return (
<div>
<button
onClick={() => {
dispatch(login({ email: '[e-mail]' }))
}}
>
Login
</button>
</div>
)
}

出现错误：Objects are not valid as a React child (found: object with keys {email}). If you meant to render a collection of children, use an array instead.

我正在使用Redux Toolkit。

Answer 1

您似乎正在组件中选择此state.user.value状态并呈现组成部分，即value.name、value.age和value.email。在调度login操作时将state.user.value.email更新为具有{ email: '[e-mail]' }的有效负载值之前，这是可以的。这使得value.email成为一个对象并且不可绘制。

使用要保存到状态的精确有效载荷值调度login操作：

<button
onClick={() => {
dispatch(login('[e-mail]'));
}}
>
Login
</button>

或者在reducer:的情况下正确地从有效载荷中解压缩email属性

const userSlice = createSlice({
name: "user",
initialState: {
value: {
name: "",
age: 0,
email: ""
}
},
reducers: {
login: (state, action) => {
state.value.name = "Alex";
state.value.age = state.value.age + 1;
state.value.email = action.payload.email;
},
}
});

我还建议简化状态，以取消测试要存储的实际值。

示例：

const userSlice = createSlice({
name: "user",
initialState: {
name: "",
age: 0,
email: ""
},
reducers: {
login: (state, action) => {
state.name = "Alex";
state.age = state.age + 1;
state.email = action.payload; // { payload: '[e-mail]' }
},
}
});

const user = useSelector(state => state.user);
...
<>
Name: {user.name}
Age: {user.age}
Email: {user.email}
</>