这个网站允许用户存储链接的集合,每个集合都有多极类别,每个类别可以有多个条目:
import { createSlice, current } from '@reduxjs/toolkit';
import { Categories, Collection } from '../TestData';
import {RandomId} from '../util/RandomId'
let categoryList = Categories
const categorySlice = createSlice({
name: 'category',
initialState: {
value: categoryList,
currentCollectionId: Collection[0].collectionId
},
reducers: {
// Retrieve categories corresponding to collectionId
getCategories: (state, { payload }) => {
const collectionId = payload
const latestCatList = []
// Find the categories corresponding with the collectionId
categoryList.map((item) => {
if (item.collectionId === collectionId) {
latestCatList.push(item)
}
})
//Update the category list the categories
state.value = [...latestCatList]
//Update the current collectionId state
state.currentCollectionId = collectionId
return state
},
// Add new category
addCategory: (state, { payload }) => {
const newCategory = {
collectionId: state.currentCollectionId,
catId: RandomId(),
name: payload.name,
listEntries: payload.listEntries
}
state.value.push(newCategory) // Add new category object to state
state.value = [...state.value]
// NEED TO ADD CATEOGRY TO TEST DATA BUT FOR SOME GODDAMN REASON ITS NOT, maybe push to database straight instead
categoryList.push(newCategory)
},
}
})
我使用react-redux
,在一个组件中,当我点击一个按钮时,它调用addCategory
动作,我在另一个文件中有一个Category
对象数组,我像这样导出和导入到这个文件中,所以我这样做的主要方法是,我必须在另一个文件中存储整个类别列表(我将使用后端拉必要的类别关联到每个用户),因为有些类别可能与不同的集合绑定,所以我有一个getCategories
简化器,它可以根据当前的集合检索适当的Categories
所以每次添加category时,我都需要添加到当前状态以及另一个文件中的Categories
数组:
但由于某种原因,当我试图将新对象推送到原始类别数组时,它会给出此错误:
错误:
categorySlice.js:36 Uncaught TypeError: Cannot add property 3, object is not extensible
at Array.push (<anonymous>)
at addCategory (categorySlice.js:36:1)
at createReducer.ts:294:1
at produce (immerClass.ts:94:1)
at createReducer.ts:293:1
at Array.reduce (<anonymous>)
at reducer (createReducer.ts:260:1)
at reducer (createSlice.ts:372:1)
at combination (redux.js:560:1)
at E (<anonymous>:1:33326)
下面是类别数组:
export const Categories = [
{
collectionId: '1232', // Reference the collection the categories are under
catId: '1232019283',
name: 'FIT 2099', // Name of category
listEntries: [ // Array of objects for each list entry
{
name: 'Assignment 1',
link: 'Ed forums FIT 2099_ A1'
},
{
name: 'Assignment 2',
link: 'Ed forums FIT 2099_ A2'
},
]
},
{
collectionId: '1232',
catId: '1232120398',
name: 'FIT 2004',
listEntries: [
{
name: 'Tutorial 2',
link: 'Master theore,'
}
]
},
{
collectionId: '1231',
catId: '123109101',
name: 'Movie List',
listEntries: [
{
name: 'Harry potter 1',
link: 'Hurawatch HP 1'
}
]
},
]
我做了一些搜索,我没有调用preventExtensions
的任何地方,所以是自动调用它的东西吗?但有道理,我尝试甚至只是复制数组使用传播运算符或改变const
到var
没有工作。
1条答案
按热度按时间wqnecbli1#
你在那里做的事情肯定不安全--你的减速器有副作用。
这个reducer完全可以用相同的
state
和action
运行100次。从Redux的Angular 来看,action
只会发生一次,因为无论你多久执行一次reducer,它总是返回相同的结果。但是,由于您将数据保存到
categoryList
的旁边,因此最终会有100个值。更糟糕的是,这在某种程度上是你状态的一部分,而在某种程度上不是。这里的reducer运行
immer
,它用一个草稿副本替换你的整个对象,然后“密封”结果,这样它就不能再被更改了。正如你所发现的,在这个过程中“取出”一些东西,然后在以后的时间访问它可能是灾难性的。你必须保持你的还原剂的纯度。你在这里所做的是行不通的。
你一开始为什么要这么做?这看起来很可行。