Redux Coding Questions

Define a counter slice with Redux Toolkit.

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value += 1;
    },
  },
});

Configure a store with the slice reducer.

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

Create typed useAppDispatch/useAppSelector.

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();

Write a memoized selector.

export const selectCount = (state) => state.counter.value;

Create an async thunk for fetching users.

export const fetchUsers = createAsyncThunk("users/fetch", async () => {
  const res = await fetch("/api/users");
  return res.json();
});

Handle pending/fulfilled in extraReducers.

extraReducers: (builder) => {
  builder.addCase(fetchUsers.fulfilled, (state, action) => {
    state.items = action.payload;
  });
}

Wrap the app with Provider.

<Provider store={store}>
  <App />
</Provider>

Dispatch an increment action from a component.

const dispatch = useAppDispatch();
<button onClick={() => dispatch(increment())}>+</button>

Store entities by id.

const initialState = {
  ids: [],
  entities: {},
};

Update nested state safely in a slice.

reducers: {
  rename(state, action) {
    state.entities[action.payload.id].name = action.payload.name;
  },
}

React to an action with listenerMiddleware.

listenerMiddleware.startListening({
  actionCreator: login.fulfilled,
  effect: async (action, api) => {
    localStorage.setItem("token", action.payload.token);
  },
});

Reset slice state on logout.

extraReducers: (builder) => {
  builder.addCase(logout, () => initialState);
}