seo Question posted in
Some basic information to get you started with this can be found here.

Redux Toolkit: state showing as Proxy / undefined within reducer – SEO

Solved it, thanks! – For anyone interested, I was trying to access state.tasks.data within the reducer however due to scope, I could access it via state.data as I was already within the tasks slice.

Edit: My issue with mutated state error is now fixed, it was due to sorting the state directly without creating a new array from it. That has been fixed with concat() before sort().

My new issue is that state within my removeTask reducer is no longer accessible. It’s now returning undefined. If I console.log(state) then it will return a Proxy with:

[[Handler]]: null,
[[Target]]: null,
[[IsRevoked]]:true

Edit 2: I’ve found that the Proxy is due to immer under the hood which does something with the mutation to use it in a way that the state is not mutated. I’ve still yet to fix the issue of state.tasks.data returning undefined.

I’m using react-redux and redux-toolkit. I am just learning Redux so my head is fried, haven’t a clue.

I’ve followed some information from the redux-toolkit basic tutorial on their website which says that you can mutate state in the reducers because toolkit does something behind the scenes to stop it actually mutating the state:

https://redux-toolkit.js.org/tutorials/basic-tutorial

In any case, the counter example they provide mutates the state. The increment reducer returns state += 1 – this works fine

Now I’ve got my own thing going where I have the initial state set to an array of objects I’ve pulled in. See below:

tasksSlice.js:

import { createSlice } from "@reduxjs/toolkit";
import data from "data/tasks_data.json";

export const tasksSlice = createSlice({
  name: "tasks",
  initialState: {
    data: data,
  },
  reducers: {
    removeTask: (state, action) => {
      const { id } = action.payload;
      const { data } = state.tasks;
      data = data.filter((item) => id !== item.id);
    },
  },
});

export const { removeTask } = tasksSlice.actions;

export const selectTasks = (state) => state.tasks.data;

export default tasksSlice.reducer;

Now I’ve got the tasks listed out in my tasks component. Each task is listed using a taskItem component. Inside the taskItem component I have a delete button which I have set the onClick event to use the removeTask reducer.

<button
  className={`${styles.task_button} ${styles.delete}`}
  onClick={() => dispatch(removeTask(id))}
>
  <MdDeleteForever />
</button>

This is passing the "customer_id" field from the data that’s mapped out into the task list from initial state.

I want to be able to delete the task so I’m trying to mutate it (as toolkit said I can) by filtering the state.tasks.data and returning everything apart from the task where the id is a match.

Unfortunately I keep getting an error message:

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'tasks.data.0'. This may cause incorrect behavior.

tasks.js – Tasks container component (quite messy):

import React, { useState, useEffect } from "react";
import SectionHeading from "components/SectionHeading/SectionHeading";
import { useSelector } from "react-redux";
import { selectTasks } from "redux/tasks/tasksSlice";
import TaskSelect from "./TaskSelect";
import TaskTabs from "./TaskTabs";
import TaskItem from "./TaskItem";
import styles from "./Tasks.module.scss";
// import tasks_data from "data/tasks_data.json";

const Tasks = () => {
  const tasksData = useSelector(selectTasks);
  console.log(tasksData);
  const [taskTab, setTaskTab] = useState({ activeTask: "All" });
  const [size, setSize] = useState({ width: 65, left: 0 });
  // const [tasksData, setTasksData] = useState(tasks_data);

  const taskTypes = [
    "All",
    "Quotes",
    "Domains",
    "SSL Setup",
    "SEO Setup",
    "Other",
  ];

  useEffect(() => {
    const activeBar = document.querySelector(".active_bar");
    const active = document.querySelector(".active_btn");
    if (size) {
      activeBar.style.width = `${active.offsetWidth}px`;
      activeBar.style.transform = `translate(${active.offsetLeft}px, ${active.offsetTop}px)`;
    }
  });

  const setActive = (e, type) => {
    setTaskTab({ activeTask: type });
    setSize(false);
    const activeBar = document.querySelector(".active_bar");
    activeBar.style.width = `${e.target.offsetWidth}px`;
    activeBar.style.transform = `translate(${e.target.offsetLeft}px, ${e.target.offsetTop}px)`;
  };

  const changeActive = (e) => {
    setTaskTab({ activeTask: e.target.value });
  };

  const getDaysDue = (days) => {
    const { days_due, overdue } = days;
    if (overdue === true) {
      if (days_due === -1) {
        return `${Math.abs(days_due)} day overdue`;
      } else {
        return `${Math.abs(days_due)} days overdue`;
      }
    } else if (days_due === 0) {
      return "Today";
    } else if (days_due === 1) {
      return `${days_due} day`;
    } else if (days_due > 1) {
      return `${days_due} days`;
    } else {
      return "Error getting days due";
    }
  };
  return (
    <article className="tasks">
      <TaskTabs
        taskTypes={taskTypes}
        click={setActive}
        activeTask={taskTab.activeTask}
        data={tasksData}
      />
      <TaskSelect taskTypes={taskTypes} change={changeActive} />
      <SectionHeading>Tasks: {taskTab.activeTask}</SectionHeading>
      <section className={styles.tasks_list}>
        {tasksData
          .sort((a, b) => a.days.days_due - b.days.days_due)
          .filter((task) =>
            taskTab.activeTask === "All"
              ? true
              : task.type === taskTab.activeTask
          )
          .map(
            ({
              customer_id,
              account_name,
              days,
              days: { days_due, overdue },
              type,
            }) => {
              return (
                <TaskItem
                  key={customer_id}
                  id={customer_id}
                  name={account_name}
                  days={getDaysDue(days)}
                  overdue={overdue}
                  daysDue={days_due}
                  type={type}
                />
              );
            }
          )}
      </section>
    </article>
  );
};

export default Tasks;

TaskItem.js:

import React from "react";
import { useDispatch } from "react-redux";
import { removeTask } from "redux/tasks/tasksSlice";
import { Link } from "react-router-dom";
import { MdModeEdit, MdDeleteForever } from "react-icons/md";
import styles from "./TaskItem.module.scss";

const TaskItem = ({ id, name, days, daysDue, overdue, type }) => {
  const dispatch = useDispatch();
  return (
    <article
      className={`
    ${styles.task} 
    ${daysDue === 0 ? `${styles.today}` : ""} 
    ${overdue === true ? `${styles.overdue}` : ""}
    `}
    >
      <Link to="/" className={styles.task_name}>
        {name}
      </Link>

      <span
        className={`${styles.task_days} ${
          daysDue === 0 ? `${styles.task_days__today}` : ""
        } ${overdue ? `${styles.task_days__overdue}` : ""}`}
      >
        <strong>{type}</strong>: {days}
      </span>

      <div className={styles.task_buttons}>
        <button className={`${styles.task_button} ${styles.edit}`}>
          <MdModeEdit />
        </button>

        <button
          className={`${styles.task_button} ${styles.delete}`}
          onClick={() => dispatch(removeTask(id))}
        >
          <MdDeleteForever />
        </button>
      </div>
    </article>
  );
};
export default TaskItem;

tasks_data.json:

[
  {
    "account_name": "Misty's Gym",
    "customer_id": 1,
    "days": {
      "days_due": 1,
      "overdue": false
    },
    "type": "Quotes"
  },
  {
    "account_name": "Brock's Diner",
    "customer_id": 2,
    "days": {
      "days_due": 0,
      "overdue": false
    },
    "type": "Quotes"
  },
  {
    "account_name": "Samurai Champloo's Fish Bar",
    "customer_id": 3,
    "days": {
      "days_due": 5,
      "overdue": false
    },
    "type": "SSL Setup"
  },
  {
    "account_name": "Tiny Rebel",
    "customer_id": 4,
    "days": {
      "days_due": -7,
      "overdue": true
    },
    "type": "Domains"
  },
  {
    "account_name": "Matalan",
    "customer_id": 5,
    "days": {
      "days_due": 13,
      "overdue": false
    },
    "type": "Other"
  },
  {
    "account_name": "Lowes Soft Drinks",
    "customer_id": 6,
    "days": {
      "days_due": 1,
      "overdue": false
    },
    "type": "SEO Setup"
  },
  {
    "account_name": "Snack 'n' Go",
    "customer_id": 7,
    "days": {
      "days_due": -2,
      "overdue": true
    },
    "type": "Quotes"
  },
  {
    "account_name": "Jeronemo",
    "customer_id": 8,
    "days": {
      "days_due": 5,
      "overdue": false
    },
    "type": "Quotes"
  },
  {
    "account_name": "Tom's Mouse Traps",
    "customer_id": 9,
    "days": {
      "days_due": 0,
      "overdue": false
    },
    "type": "Domains"
  },
  {
    "account_name": "Contiente",
    "customer_id": 10,
    "days": {
      "days_due": 2,
      "overdue": false
    },
    "type": "Domains"
  },
  {
    "account_name": "Um Bongo",
    "customer_id": 11,
    "days": {
      "days_due": -1,
      "overdue": true
    },
    "type": "SEO Setup"
  }
]

What on earth am I doing wrong? How else can I set the state?

Cheers.

Tags:

4

Answers


  1. 0

    Do it like this:

    removeTask: (state, action) => {
      const { id } = action.payload;
      const { data } = state.tasks;
      const index = data.findIndex((item) => id === item.id);
      data.splice(index, 1)
}
    Login or Signup to reply.
  2. 0

    tasksData.sort (in your Tasks component) modifies the original tasksData array from the store, as sort does that. Make a new array out of it beforehand, e.g. by tasksData.concat().sort(...

    Login or Signup to reply.
  3. 0

    Inside a reducer action, the state prints as a Proxy object (in Redux Toolkit), but there is function based on redux-toolkit docs current that you can use to print your state inside reducer actions like this e.g

    import {createSlice,current } from '@reduxjs/toolkit'

const todoSlice = createSlice({
    name: 'todo',
    initialState,
    reducers: {
        deleteTodo(state,action) {
            console.log(current(state));
            let f=state.tasks.splice(action.payload,1);
        },  
    },
});
    Login or Signup to reply.
  4. 0

    The following code worked for me:

    import {current } from '@reduxjs/toolkit'

    {...
    
    console.log(current(state));
    ...
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search