探索Redux Store切片中修改數組值的方法

Question

我有一個Slice來儲存位置資訊。我聲明了兩個函數，set和setLocation。 set函數接受一個位置數組，setLocation函數應該設定一個位置。

這是儲存在locations變數中的範例資料：

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

;

這是我的slice程式碼：

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

set(locations)的呼叫是有效的。但是當location是locations數組中的一個值時，我無法使用setLocation(location)來替換位置數組中的單一位置。 當我在setLocation()函數中使用console.log(state.location)時，我得到了一些代理物件。

Answer 1

你在setLocation操作中得到Proxy的問題是因為在搜尋特定位置時，你傳遞了location.index，但你應該傳遞location.payload.index。

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