2.1.3.2 State Management

Redux Toolkit

• Simplifies slice creation, asynchronous thunks, and store configuration.

• Example slice (userSlice) handles user login, logout, and profile data.

// src/redux/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const loginUser = createAsyncThunk('user/loginUser', async (payload) => {
  const response = await axios.post('/api/users/login', payload);
  return response.data;
});

const userSlice = createSlice({
  name: 'user',
  initialState: {
    userInfo: null,
    token: null,
    loading: false,
    error: null
  },
  reducers: {
    logout(state) {
      state.userInfo = null;
      state.token = null;
      localStorage.removeItem('token');
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(loginUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(loginUser.fulfilled, (state, action) => {
        state.loading = false;
        state.userInfo = action.payload.user;
        state.token = action.payload.token;
        localStorage.setItem('token', action.payload.token);
      })
      .addCase(loginUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error;
      });
  }
});

export const { logout } = userSlice.actions;
export default userSlice.reducer;