I'm trying to set a file inside a slice with redux-toolkit but it doesn't work.
First, here is my slice file
import { createSlice } from "@reduxjs/toolkit"
export const assignorsSlice = createSlice({
name: "assignors",
initialState: {
list: [],
assignorFileSignToUpdate: null,
},
reducers: {
getAssignorsList: (state) => {
return state.list
},
setAssignorsList: (state, action) => {
state.list = action.payload
},
addAssignor: (state, action) => {
state.list.push(action.payload)
},
toggleAssignor: (state, action) => {
const rut = action.payload
const assignor = state.list.find((assignor) => {
return assignor.rut === rut
})
assignor.active = !assignor.active
},
setAssignorFileSignToUpdate: (state, action) => {
state.assignorFileSignToUpdate = action.payload
console.log(
" ~ file: assignors.js ~ line 28 ~ action.payload",
action.payload
)
console.log(
" ~ file: assignors.js ~ line 29 ~ state.assignorFileSignToUpdate",
state.assignorFileSignToUpdate
)
},
getAssignorFileSignToUpdate: (state) => {
return state.assignorFileSignToUpdate
},
},
})
// export actions
export const {
setAssignorsList,
addAssignor,
toggleAssignor,
getAssignorsList,
setAssignorFileSignToUpdate,
getAssignorFileSignToUpdate,
} = assignorsSlice.actions
export default assignorsSlice.reducerThe problem is in the setAssignorFileSignToUpdate action, I logged the payload and the state variable. The payload and the state in the console.log are correct, but the redux chrome extensión shows the assignorFileSignToUpdate variable with an empty object (see the image).
In the slice file the assignorFileSignToUpdate variable is a file (the console.log shows it), but in the redux chrome extension is not, and when I call the useSelector to see this variable is an empty object too.
I don't know why this is happening, if you guys know the mistake I made or a way to fix it I would really appreciate it. Thanks in advance.