如何获取createSlice()来更新我的页面

Question

我正在创建一个聊天室应用程序，我一直在学习Redux Toolkit。我目前有文本输入，单击"发送"时会转到消息数据对象；然而，我似乎无法让页面更新和呈现新消息。有人知道为什么吗？

减速器：

import { createSlice, current } from '@reduxjs/toolkit'
import chatData from '../../components/chatData'
export const chatSlice = createSlice({
name: 'chat',
initialState: chatData[0],
reducers: {
addChat: (state, action) => {
if (action.payload !== '') {
state.messages.push({
avatar: "#",
username: "",
message: action.payload
})
console.log('after', current(state))
}
console.log(action.payload);
},
},
});
export const { addChat } = chatSlice.actions
export const selectChat = state => state.messages
export default chatSlice.reducer

JSX:

<div>
{props.chatData.messages.map((val, i) => {
return <MessageBox username={val.username} avatar={val.avatar} message={val.message} />
}
</div>

状态确实会根据Redux DevTools和一些控制台日志进行更新，但页面不会相应更新。

Answer 1

如果商店中的状态确实更新了，那么我认为问题是由您的组件引起的：

1. 您没有正确地将状态映射到组件，可能是打字错误？

2. 已修改组件的shouldComponentUpdate方法，以防止重新绘制组件。