0

I'm trying to implement a file upload button. I want to store the user's selected files in a redux store using redux-toolkit. My code works but I get the warning "A non-serializable value was detected in the state". How can I improve my code to get rid of the warning?

//Code to create slice
const initialState = {
  listOfSelectedFiles: [0]
};

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: 
  {
    addFileToList: (state, action) =>
    { //Add selected file to state
      state.listOfSelectedFiles.push(action.payload)
    }
  }
});


//Function inside react component to handle uploads
const HandleSelectedFiles = event => {
    const uploadedFiles = event.target.files[0];
    dispatch(addFileToList(uploadedFiles))
  };
murage kibicho
  • 546
  • 5
  • 14
  • 1
    Does this answer your question? https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using – Lin Du May 23 '23 at 11:45
  • Thank you. This was not what I wanted. The answers in that thread guide towards turning off the serialization check. I was hoping to find an alternative. – murage kibicho May 23 '23 at 11:50
  • 1
    The warning is that you should not store a FileList in RTK. As long as you want to store that FileList there, your only way to get rid of that error message is disabling the error message. – phry May 23 '23 at 16:51

0 Answers0