我有一个Redux Slice,我想定义一个属性和它自己的兄弟属性。在这个例子中,我想定义一个playableFields
属性和width
和height
属性。但是当我写这个函数的时候,reducer带来了问题。我使用的是Typescript,所以也许你应该考虑一下。
Redux切片文件:
import { createSlice } from "@reduxjs/toolkit"
const levelSlice = createSlice({
name: "level",
initialState: {
... //other states
gridSizeAndPlayableFields: {
width: 8,
height: 9,
playableFields: function() { // <---- problems comes after adding this function
return (
{
rows:
[...Array(this.height)].map(()=>
(
{
cells:
[...Array(this.width)].map(()=>
(
{status: true}
)
)
}
)
)
}
)
}
}
reducers: {
... //other reducers
changeGridSize: (state, action) => {
state.gridSizeAndPlayableFields.width = action.payload.width,
state.gridSizeAndPlayableFields.height = action.payload.height
},
changePlayableFields: (state, action) => {
const i = action.payload.i
const k = action.payload.k
const localTable = {...state.gridSizeAndPlayableFields.playableFields}
localTable.rows[i].cells[k].status = !localTable.rows[i].cells[k].status
state.gridSizeAndPlayableFields.playableFields = localTable
}
}
})
如果你想知道这个切片是做什么的,这里我离开了那个图像。它定义了一个关卡的可玩区域。当你点击一个盒子时,它会根据情况变成假或真。上面的滑块定义了盒子的大小...
以下是CodeSandbox链接:https://codesandbox.io/s/naughty-framework-nkbfnd?file=/src/redux/levelSlice.tsx
1条答案
按热度按时间ev7lccsx1#
我通过使用状态更改组件中的所有数据并将它们发送到幻灯片来找到解决方案。