Using React and Redux, how would you clear an input field after a successful redux-thunk completion?

Question

Let's say you are using react and redux and you have the following elements on a page:

• Input field to write something
• A save button to write your text async to the DB

The expected flow is that the save button should dispatch a save redux thunk to handle the async behaviour of the save. So far, so good.

But there's an extra tricky requirement:

• Upon save success, the input should be cleared.

I think that there are a couple of ways to handle this:

---

OPTION 1

• Add the controlled input state to your Redux store

This is the easiest one. Basically you'll add the input state to your Redux store and when you thunk dispatch the SAVE_SUCCESS action, your reducer will respond with something like this:

SAVE_SUCCESS(state, action) {
  state.inputValue = '';
}

The downside of this is that you'll have to dispatch an action on every key stroke, and that is going to flood your Redux devTools inspector.

---

OPTION 2

• Have a controlled input using React local state
• Pass an clearInput function (using useCallback) to your save thunk

Something like this:

const [inputValue, setInputValue] = useState('initialVale');
const clearInput = useCallback(() => setInputValue(''),[]);

const onClick = dispatch(saveThunk({clearInput});

So, from the thunk you would do something like:

const { clearInput } = thunkProps;
await saveToDB();
clearInput(); // THIS COMES FROM THE thunkProps

---

OPTION 3

• Same as option 2 but with an uncontrolled input (so, no state at all)
• Pass the input ref element to your thunk

So, from the thunk you would do something like:

const { inputRef } = thunkProps;
await saveToDB();
inputRef.current.value = '';

---

QUESTION

Which one would you go for and why? And also, is there a better approach to this that I'm not aware of?

Answer 1

I would go for awaiting the promise from the thunk in the component, and setting component state there, as shown in our tutorials:

• https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#thunks-and-promises
• https://redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components

Example:

  const handleKeyDown = async e => {
    // If the user pressed the Enter key:
    const trimmedText = text.trim()
    if (e.which === 13 && trimmedText) {
      // Create and dispatch the thunk function itself
      setStatus('loading')
      // Wait for the promise returned by saveNewTodo
      await dispatch(saveNewTodo(trimmedText))
      // And clear out the text input
      setText('')
      setStatus('idle')
    }
  }

Answer 2

I guess Mark's answer should be the recommended one. But, as another approach (and as a note to myself in the future), if you are not using the createAsyncThunk function to create your thunks, you can specify a value to be returned from a regular thunk, that you create yourself.

This is a very crude example, but would do the trick:

import { AnyAction, ThunkAction } from '@reduxjs/toolkit';

type MaybeSuccess = { success: boolean }
type AppThunkMaybeSuccess = ThunkAction<Promise<MaybeSuccess>, RootState, unknown, AnyAction>;


export const someThunk = (): AppThunkMaybeSuccess => async (dispatch, getState) => {
  try {
    dispatch(SOME_THUNK_START());
    const data = await doSomeAsyncStuff(...);
    dispatch(SOME_THUNK_SUCCESS({ data }));
    return ({ success: true });
  }
  catch(err) {
    const error = err as Error;
    dispatch(SOME_THUNK_FAILURE();
    return ({ success: false });
  }
}

Then, on your component (the one that dispatches the thunk), you could do:

const handleSave = useCallback(async () => {
  const { success } = await dispatch(saveThunk());
  if (success) {
    setInputValue('');
  }
},[]);