Redux Toolkit is the official way to write Redux apps

// ✅ This is safe, because we made a copy
function handwrittenReducer(state, action) {
  return {
    ...state,
    company: {
      ...state.company,
      department: {
        ...state.company.department,
        team:
          ...state.company.department.team,
          users:  action.filteredUsers,
      },
    },
  };
}

const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    // Change existing state without returning a value
    changeExistingState(state, action) {
      state.push(action.payload)
    },
    // Create and return a new state value
    newState(state, action.payload) {
      return state.filter(user => user.id !== action.payload)
    },
    // Create new immutably array and mutate existing state
    newArrayMutateExistingState(state, action.payload) {
      const filteredUsers = state.company.department.team.users.filter(user => user.id !== action.payload)
      state.company.department.team.users = filteredUsers
    },
  },
});

// src/store/counter/types.ts
// Declare our Redux actions
// Redux actions explain what is happening in the app.
export type CounterState {
  total: number;
}

export enum actionTypes {
  INCREMENT = "counter/increment",
  DECREMENT = "counter/decrement",
  INCREMENT_BY_AMOUNT = "counter/incrementByAmount",
}

export type IncrementAction {
  type: types.INCREMENT;
}

export type DecrementAction {
  type: types.DECREMENT;
}

export type IncrementByAmountAction {
  type: types.INCREMENT_BY_AMOUNT;
  payload: number;
}

export type Action =
  | IncrementAction
  | DecrementAction
  | IncrementByAmountAction;

// src/store/counter/actions.ts
// Declare action creators
// Action creators allow us to reuse the same action object when calling Redux actions
import { types, IncrementAction, DecrementAction } from './types';

export const incrementCount = (): IncrementAction => ({
  type: types.INCREMENT,
});

export const decrementCount = (): DecrementAction => ({
  type: types.DECREMENT,
});

export const incrementAmount = (num: number): IncrementByAmountAction => ({
  type: types.INCREMENT_BY_AMOUNT,
  payload: num,
});

// src/store/counter/reducer.ts
// Declare Reducers
// Reducers are event listeners that handle the data depending on which action type is being executed.
import { CounterState, types, Action } from './types';
import { Reducer } from 'redux';

export const initialState: CounterState = {
  total: 0,
  name: 'counter example',
};

export const reducer: Reducer<CounterState, Action> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case types.INCREMENT:
      return { ...state, total: state.total + 1 };
    case types.DECREMENT:
      return { ...state, total: state.total - 1 };
    case types.INCREMENT_BY_AMOUNT:
      return { ...state, total: state.total + action.payload };
    default:
      return state;
  }
};

// src/store/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type CounterState = {
  total: number;
};

const initialState: CounterState = {
  total: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const counterReducer = counterSlice.reducer;

// src/store/store.ts
// Instantiate the Redux store
import { createStore, combineReducers } from 'redux';
import {
  reducer as counter,
  increment,
  incrementByAmount,
  decrement,
} from './counter';

const store = createStore(combineReducers({ counter }));

store.dispatch(increment());
store.dispatch(incrementByAmount(5));
store.dispatch(decrement());

// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import { counterReducer } from './counterSlice';
import { increment, incrementByAmount, decrement } from './counter';

export const store = configureStore({
  reducer: combineReducers({
    counter: counterReducer,
  }),
});

store.dispatch(increment());
store.dispatch(incrementByAmount(5));
store.dispatch(decremented());

export type UserState = {
  loading: boolean;
  total: number;
  user: User | null;
};

export const initialState: UserState = {
  loading: false,
  total: 0,
  user: null,
};

export const fetchUser = createAsyncThunk(
  // action type string
  'users/fetchUser',
  // callback function
  (userId: string) => api.get(`user/${userId}`) as UserResponse
);

export const userSlice = createSlice({
  name: 'user',
  initialState,
  // reducers react to action types created by the current 'slice.'
  // Ex: total is included in the user slice, so we will add increment action to reducers
  reducers: {
    increment: (state) => {
      state.total += 1;
    },
  },
  // extraReducers reacts to action types NOT created by the current 'slice'
  extraReducers: (builder) => {
    // builder.addCase allows us to handle a specific action type
    // Ex: addCase will only fire when fetchUser.pending is the action type
    builder.addCase(fetchUser.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload.user;
    });
    // builder.addMatcher allows us to handle any action types that meets our conditional
    // Ex: addMatcher will fire if with any action type that ends with /rejected
    builder.addMatcher(
      (action): action is RejectedAction => action.type.endsWith('/rejected'),
      (state, action) => {
        state.loading = false;
        state.user = null;
      }
    );
    // builder.addDefaultCase fires if no other builder callback is matched with the action type
    // Ex: addDefaultCase will fire if no action type is found
    builder.addDefaultCase((state, action) => {
      state.error = 'Could not find action type to fire';
    });
  },
});

export const userReducer = userSlice.reducer;