在 React 表单中输入字段的 onChange 属性上使用 Dispatch()

Question

Let's say there are 10 input field data. They are required to persist across 3 pages such as form page, preview page and confirmation page.

So I guess the data would definitely to sit in Redux as global data for the 3 pages. Normally, I would create 10 useState hooks in the form page to store the 10 data/states and assign setState to every onChange prop. Once the submit button is clicked, they will be dispatched as payload and got updated into redux store.

However, one day I came up with an idea why don't I just assign dispatch to every onChange prop since the 10 data will eventually sit in redux store. With this, I do not need to create 10 useState hooks and feel it is "redundant" to store same data two times ( in both useState hook and redux store).

But this yields another issue, which is frequent call to redux to retrieve newest data using useSelector() and dispatch new action using useDispatch(). But frequent call to redux store should not be a big deal since it is still synchronous right? I got confused and feeling unsure at this point.

Hence, I would like to seek advices from React experts on this...Does that mean in my case, using useDispatch only (not both useState and useDispatch) is better?

//(A) : useState + useDispatch
 //create 10 useState hooks to store data/states. 
 //They are compiled and dispatched as payload to redux on button click

<input type="text" value={value1} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value2} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value3} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value4} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value5} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value6} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value7} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value8} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value9} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value10} onChange={()=>setValue(e.target.value)} />
<button onClick={handleSubmit}>Submit</button>

//(B) useDispatch only
 //valueSelector1 means the value is taken from the useSelector()

<input type="text" value={valueSelector1} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector2} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector3} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector4} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector5} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector6} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector7} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector8} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector9} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector10} onChange={()=>dispatch(setValue(e.target.value))} />
<button onClick={handleSubmit}>Submit</button>

Answer 1

I recommend putting them all together (with one dispatch) in Redux because maybe there will be unpredictable behavior due to updates in your store. Just define one state instead of many states and do the job:

Note : the name property of each input is same as the state's key.

const [state,setState] = useState({value1:"fake",..., value9:"test"})

const handleValues=(e)=>{
  const {name,value} = e.target
  setSate({[name]:value})
}


<input type="text" value={value1} name="value1" onChange={handleValues} />
.
.
.
<input type="text" value={value9} name="value9" onChange={handleValues} />

<button onClick={handleSubmit}>Submit</button>

Answer 2

Both the approaches (calling useState or dispatch onChange event) are different in terms of blocking and non-blocking UI thread.

useState implementation -> Whenever the state updated react re-renders the component but for the frequent state update react queues the state update and update it on UI. So this is a non-blocking implementation.

dispatch implementation While redux dispatch the actions in a synchronous manner, so it blocks the execution of code due to which it may increase ui update time on screen and also may cause some unexpected results.

So you can go with the way managing the local state in the component and dispatch the collective response in on go. This approach will also help you to validate the user input as well before dispatching it.

Use state

const [payload,setPayload] = useState({value1:"dummy",..., value9:"dummy1"})

Add a unique id with the input element

<input type="text" value={value1} id="value1" onChange={handleChange} />

Implement the handleChange function

const handleChange =(e)=>{
   const {id,value} = e.target
   setPayload(initialState => { ...initialState, [id]:value })  //Give preference to provide the callback in place of object during setting the state
}

And at the end you can dispatch this state to redux store

Answer 3

Your option A is more preferable:

1. Instead of using 10 different state/useState hooks, you should use a single state object of 10 input field data.

2. If we use useDispatch every time and call the redux store, then in that scenario, the store state will get updated. But if the user hadn't submitted that form or say user hadn't clicked submit button, then also redux data will be changed, which will create a problem.