javascript - Redux Toolkit:状态在 reducer 中显示为 Proxy / undefined
问题描述
解决了,谢谢!- 对于任何感兴趣的人,我试图在减速器中访问 state.tasks.data 但是由于范围,我可以通过 state.data 访问它,因为我已经在任务切片中。
编辑:我的突变状态错误问题现在已修复,这是由于直接对状态进行排序而没有从中创建新数组。concat()
之前已经解决了这个问题sort()
。
我的新问题是state
在 my 内removeTask reducer
不再可访问。它现在返回未定义。如果我console.log(state)
那么它将返回一个Proxy
:
[[Handler]]: null,
[[Target]]: null,
[[IsRevoked]]:true
编辑2:我发现代理是由于immer
在引擎盖下它对突变做了一些事情,以一种没有突变的方式使用它state
。我还没有解决退货的state.tasks.data
问题undefined
。
我正在使用 react-redux 和 redux-toolkit。我只是在学习 Redux,所以我的头很炸,一无所知。
我遵循了他们网站上 redux-toolkit 基本教程中的一些信息,这些信息说你可以在 reducer 中改变状态,因为工具包在幕后做了一些事情来阻止它实际改变状态:
https://redux-toolkit.js.org/tutorials/basic-tutorial
在任何情况下,他们提供的反例都会改变状态。增量减速器返回state += 1
- 这很好用
现在我已经有了自己的东西,我将initial state
集合设置为我拉入的对象数组。见下文:
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;
现在我的tasks
组件中列出了任务。每个任务都使用一个taskItem
组件列出。在taskItem
组件内部,我有一个删除按钮,我已将onClick
事件设置为使用removeTask
减速器。
<button
className={`${styles.task_button} ${styles.delete}`}
onClick={() => dispatch(removeTask(id))}
>
<MdDeleteForever />
</button>
这是将“customer_id”字段从data
映射到任务列表的initial state
.
我希望能够删除任务,所以我试图通过过滤state.tasks.data
并返回除id
匹配的任务之外的所有内容来改变它(正如工具包所说的那样)。
不幸的是,我不断收到一条错误消息:
Error: Invariant failed: A state mutation was detected between dispatches, in the path 'tasks.data.0'. This may cause incorrect behavior.
tasks.js
- 任务容器组件(相当混乱):
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"
}
]
我到底做错了什么?我还能如何设置状态?
干杯。
解决方案
在 reducer action 中,状态打印为 Proxy 对象(在 Redux Toolkit 中),但是有一个基于 redux-toolkit docs current的函数,您可以使用它在 reducer action 中打印您的状态,例如
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);
},
},
});
推荐阅读
- kotlin - Kotlin+Room+Paging+LiveData 用于消息传递应用程序问题
- excel - 如何在 maatwebsite 3.1 的多个表单中使用 withEvents 应用样式?
- vba - 使用 VBA 创建 ODBC DSN
- javascript - 我的代码中似乎有两种形式的数组对象,reduce 不适用于一种。有任何想法吗?
- kubernetes - 我可以在两个 k8s 集群之间同步 Persistent Volume 吗?
- java - com.gargoylesoftware.htmlunit.ElementNotFoundException: elementName=[form] attributeName=[name] attributeValue=[docSearch]
- android - Android Build Tools 安装在“/Applications/ADT/sdk/platform-tools”
- c# - .net 核心 3.1:'IAsyncEnumerable
' 不包含 'GetAwaiter' 的定义 - image - gulp-webp 转换具有黑色背景的图像。如何转换为完全透明的背景?
- sql - PostgreSQL 正则表达式用条件替换函数