I am currently using Material Ui dropzone to upload multiple files. just wondering what is the best way to add/update files in the redux store. I am currently doing a dispatch action when "onChange" triggers which return all the files on the dropzone and updating the redux state by storing the whole files array which has files object.
please let me know if there is a best way, to handle this.
One of the key rules of Redux is that non-serializable values should not go into the store. Because of that, file objects should not be kept in the Redux store if at all possible.
A store is an immutable object tree in Redux. A store is a state container which holds the application's state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer.
Saving data to localStorage in React is super easy: const [data, setData] = useState([]); useEffect(() => { localStorage. setItem('dataKey', JSON. stringify(data)); }, [data]);
One of the key rules of Redux is that non-serializable values should not go into the store. Because of that, file objects should not be kept in the Redux store if at all possible.
I had a similar problem and ended up using this:
URL.createObjectURL(file)
It returns a url like blob:http://example.com/f331074d-a7f3-4972-9c37-96b490a4dd96
which is just a string and can be used in img
tag's src
attribute. Not sure what Material Ui dropzone returns, but this works with File objects returned by <input type="file" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With