Im not sure why I'm getting Error: Immer drafts cannot have computed properties
in my reducer code. I'm using redux-starter-kit
which wraps all my reducer code with the Immer library.
I'm not entirely sure what Immer is referring to with "computed property." Does it mean getters/setters? Because I'm not creating any getters or setters explicitly. Is the object spread operator doing it?
Do getters/setters contaminate the state object somehow?
Or is computed property in reference to computed property names? https://tylermcginnis.com/computed-property-names/
My reducer is fairly simple:
import { createSlice } from 'redux-starter-kit'
const assets = createSlice({
slice: 'assets',
initialState: {byName: {}},
reducers: {
upload: (state, action) => {
const {name} = action.payload;
state.byName[name].status = 'uploading';
},
initialize: (state, action) => {
const {assets, id} = action.payload;
assets.forEach(({name, uri}) => {
state.byName[name] = {
uri,
name,
status: 'local',
id,
inProgress: true
};
});
},
}
})
export default assets;
The assets/initialize action is triggered first with no error, and the immer error occurs when the assets/upload action is triggered
I'm not sure where all those get name / set name, get uri / set uri fields are coming from. Is that what Immer is complaining about?
I rewrote the upload reducer to create a new object,
upload: (state, action) => {
const {name} = action.payload;
state.byName[name] = {
...state.byName[name],
status: 'uploading',
};
},
and the error I get now is equally baffling: