title: How can I get createSlice() to update my page?
body: <p>I'm creating a chatroom app, and I've been learning Redux Toolkit as I do it. I currently have text input that will go to the messages data object when 'Send' is clicked; however, I can't seem to get the page to update and render new messages. Anyone know why?</p>
  <p>Reducer:</p>
  <pre><code>import { createSlice, current } from '@reduxjs/toolkit'
  import chatData from '../../components/chatData'
  
  export const chatSlice = createSlice({
      name: 'chat',
      initialState: chatData[0],
      reducers: {
          addChat: (state, action) =&gt; {
              if (action.payload !== '') {
                  state.messages.push({
                      avatar: &quot;#&quot;,
                      username: &quot;&quot;,
                      message: action.payload
                  })
                  console.log('after', current(state))
              }
              console.log(action.payload);
          },
      },
  });
  
  export const { addChat } = chatSlice.actions
  
  export const selectChat = state =&gt; state.messages
  
  export default chatSlice.reducer
  </code></pre>
  <p>JSX:</p>
  <pre><code>&lt;div&gt;
      {props.chatData.messages.map((val, i) =&gt; {
          return &lt;MessageBox username={val.username} avatar={val.avatar} message={val.message} /&gt;
      }
  &lt;/div&gt;
  </code></pre>
  <p>The state does update according to Redux DevTools and some console logging, but again, the page will not update accordingly.</p>