Using createSlice to Simplify Reducers and Actions

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

// Define initial state
const initialState = {
  todos: [],
  status: 'idle',
};

// Create the todos slice using createSlice
const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      // Reducer to add a new todo
      state.todos.push({
        id: state.todos.length + 1,
        text: action.payload,
        completed: false,
      });
    },
    toggleTodo: (state, action) => {
      // Reducer to toggle the completed status of a todo
      const todo = state.todos.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    removeTodo: (state, action) => {
      // Reducer to remove a todo by id
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
    }
  },
});

// Export generated actions
export const { addTodo, toggleTodo, removeTodo } = todosSlice.actions;

// Export the reducer
export default todosSlice.reducer;