I have a 5 step form in React. Form data is being stored in redux. I also have a file upload on step 3. Step x is unmounted when I go to step x+1. The goal is to perform file upload on the last, 5th step, when I have no mounted input file. My plan is to store event.target.files in redux and access it on the final step and use this object to upload file. Will it work, will browser allow me to do such trick?
Thanks in advance
It might not be feasible, but with React's new Hooks API, Redux isn't necessary for smaller web applications anymore. I'd consider migrating away from Redux in favor of the useState hook.
If you do it this way, you can have one component for the overall form and several children component for each of the five steps. On the last step, you can upload the files from the component state, rather than from the Redux store.
That being said, if you decide to stick with Redux, you'll have to make sure you dispatch an action as soon as the file is uploaded to populate it in the store. Once you're on the final step, dispatch an action to upload the file from the store to wherever it needs to go.
Here's an example of how to use useState:
This is taken directly from React's documentation:
`
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState is used?
