Explore ways to modify array values ​​in Redux Store slices

Question

I have a Slice to store location information. I declared two functions, set and setLocation. The set function accepts an array of locations, and the setLocation function should set a location.

This is sample data stored in the locations variable:

const locations = [{name: '1', index: 0}, {name: '2', index: 1}];

;

This is my slice code:

import { createSlice } from '@reduxjs/toolkit'

export const locationsSlice = createSlice({
    name: 'locations',
    initialState: {
        locations: null,
    },
    reducers: {
        set: (state, locations) => {
            state.locations = locations.payload
        },
        setLocation: (state, location) => {
            state.locations[location.index] = location
        }
    },
})

export const { set, setLocation } = locationsSlice.actions
export default locationsSlice.reducer

The call to set(locations) is valid. But when location is a value in the locations array, I cannot use setLocation(location) to replace a single location in the locations array. When I use console.log(state.location) in setLocation() function, I get some proxy objects.

Answer 1

The problem you are getting Proxy in the setLocation operation is because when searching for a specific location, you are passing location.index, but you should be passing location.payload.index.

setLocation: (state, location) => {
   state.locations[location.payload.index] = location
}