我怎样才能让 createSlice() 更新我的页面？

Question

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

减速器：

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

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

您没有正确地将状态映射到您的组件，可能是拼写错误？
修改了组件的 shouldComponentUpdate 方法以防止重新呈现组件。

我怎样才能让 createSlice() 更新我的页面？

How can I get createSlice() to update my page?

javascript

jsx

reactjs

react-redux

redux-toolkit