Toolkit

Code example

import { configureStore, createSlice } from "@reduxjs/toolkit";
import { Provider, useDispatch, useSelector } from "react-redux";

const counter = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: { inc: (s) => { s.value += 1; } },
});

const store = configureStore({ reducer: { counter: counter.reducer } });

export function Example() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

function Counter() {
  const value = useSelector((s: { counter: { value: number } }) => s.counter.value);
  const dispatch = useDispatch();
  return (
    <button type="button" onClick={() => dispatch(counter.actions.inc())}>
      Count: {value}
    </button>
  );
}

Pros & cons

FAQs