state.filter using redux-toolkit and component re-rendering

[joshtheflame]

I am developing a small Task application for react.js learning. When user clicks on "x' delete task it calls a middleware (node.js) based API and delete the task then apply filter on map to make the task disappear from the UI. I am using redux tool kit and using dispatch method where I am setting the same state.filter but its not making the task disappear but when I refresh the page it gets disappear. Ideally my ask is when I delete the task it should call dispatch, apply filter on state and re-render component. Please advise

Following is the code:

redux toolkit store code:

import { configureStore } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";

const initialBtnState = { showAddTaskBtn: false };

const showAddSlice = createSlice({
  name: "AddTask",
  initialState: initialBtnState,
  reducers: {
    toggleAddTask(state) {
      state.showAddTaskBtn = !state.showAddTaskBtn;
    },
  },
});

const initialTaskState = { mystate: [] };

const taskSlice = createSlice({
  name: "TaskOperations",
  initialState: initialTaskState,
  reducers: {
    FetchTasks(state, action) {
      state.mystate = action.payload;
    },
    AddTask(state, action) {},
    DeleteTask(state, action) {
      const tid = action.payload;
      console.log("inside reducer function");
      state.mystate = state.mystate.filter((task) => task.id !== tid);
    },
    toggleReminder(state) {},
  },
});

const store = configureStore({
  reducer: { taskbtn: showAddSlice.reducer, tasks: taskSlice.reducer },
});

export const showAddActions = showAddSlice.actions;
export const taskActions = taskSlice.actions;

export default store;

Tasks Component source:

import { useEffect } from "react";
import Task from "./Task";
import { useSelector, useDispatch } from "react-redux";
import { taskActions } from "../store";
import { getTasks, delTheTask } from "../api/Tasks_Api";

let isInitial = true;

const Tasks = ({ task }) => {
  const dispatch = useDispatch();
  const mystate = useSelector((state) => state.tasks.mystate);

  useEffect(() => {
    const getData = async () => {
      const alldata = await getTasks();
      if (alldata) {
        dispatch(taskActions.FetchTasks(...mystate, alldata));
      } else {
        console.log("no data found..");
        return;
      }
    };
    getData();
  }, []);

  return (
    <>
      {mystate.map((item, index) => (
        <Task key={item.id} task={item} />
      ))}
    </>
  );
};
export default Tasks;

Task Component Source(single task rendering) which is being called from above "Tasks" component

import { FaTimes } from "react-icons/fa";
import { useContext, useEffect } from "react";
import { DataContext } from "../context/DataContext";
//import { useMutation, useQuery } from "react-query";
import { delTheTask } from "../api/Tasks_Api";
import { useSelector, useDispatch } from "react-redux";
import axios from "axios";
import { taskActions } from "../store";

const Task = ({ task }) => {
  //const { mystate, setState } = useContext(DataContext);
  const dispatch = useDispatch();
  const mystate = useSelector((state) => state.tasks.mystate);

  // const taskMutation = useMutation((taskid) => {
  //   delTheTask({ taskid });
  // });

  //Delete Task function
  const deleteTask = (xid) => {
    console.log("inside delete task function");
    //console.log(typeof xid + xid);
    delTheTask(xid);
    dispatch(taskActions.DeleteTask(...mystate, xid));

  };
  // const deleteTask = (xid) => {
  //   if (!xid) {
  //     return;
  //   } else {
  //     taskMutation.mutate(xid);
  //      //setState(mystate.filter((task) => task.id !== xid));
  // };
  //   }

  //Toggle Reminder function
  const toggleReminder = (id) => {
    setState(
      mystate.map((task) =>
        task.id === id ? { ...task, reminder: !task.reminder } : task
      )
    );
  };

  return (
    <div
      className={`task ${task.reminder ? "reminder" : ""}`}
      onDoubleClick={() => toggleReminder(task.id)}
    >
      <h3>
        {task.text}{" "}
        <FaTimes
          style={{ color: "red", cursor: "pointer" }}
          onClick={() => deleteTask(task.id)}
        />
      </h3>
      <p>{task.day}</p>
    </div>
  );
};

export default Task;

[phryneas]

You are using the action generator wrong, you don't call those with a state argument:

-dispatch(taskActions.DeleteTask(...mystate, xid));
+dispatch(taskActions.DeleteTask(xid));

[joshtheflame]

Thank you so much for guiding me in the right direction. now its working fine :)

[Zaman-Haider]

That's great