useReducer + @reduxjs/toolkit

App.tsx

import React, { useReducer } from "react";
import { messages, initialMessagesState } from "./slices/messages";

const App: React.FC = () => {
  const [messageList, dispatch] = useReducer(
    messages.reducer,
    initialMessagesState
  );

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => dispatch(messages.actions.addMessage("Test"))}>
          Hey
        </button>
        {messageList.map(m => (
          <li key={m}>{m}</li>
        ))}
      </header>
    </div>
  );
};

export default App;

messages.ts

import { createSlice } from "@reduxjs/toolkit";

export const initialMessagesState: string[] = [];

export const messages = createSlice({
  name: "messages",
  initialState: initialMessagesState,
  reducers: {
    addMessage(draft, action: { payload: string }) {
      draft.push(action.payload);
    }
  }
});

reduxjs/redux-toolkit#484

import { createSlice } from "@reduxjs/toolkit";

export const initialMessagesState: string[] = [];

export const messages = createSlice({
  name: "messages",
  initialState: initialMessagesState,
  reducers: {
    addMessage(draft, action: { payload: string }) {
      draft.push(action.payload);
    }
  }
});

Thanks for the improvement @Kepro, I've updated the code to match yours, the immer API is cleaner here.

For anyone who finds this gist on google, there's no good reason why the solution here reduxjs/redux-toolkit#484 requires a ref. We're just taking advantage of the @reduxjs/toolkit API for declaring a reducer concisely and passing a pure function to useReducer.