Monday, 19 August 2019

Immer drafts, computed properties

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

assets/initialize output

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?

assets/upload output

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:

assets/upload error output



from Immer drafts, computed properties

No comments:

Post a Comment