useReducer naming conventions

Question

Is there any reliable and readable naming standard as it comes to naming the outputs of the useReducer hook? What are the best practices, that make the further component's logic more understandable?

Naming the output of the useState is very intuitive and usually it comes down to:

const [value, setValue] = useState(0);

But I don't find it so obvious as it comes to the useReducer hook. In all the examples I have found, the most common approach is:

const [value, dispatch] = useReducer(valueReducer, 0);

However it doesn't make sense when there is more than one reducer used within the component.

The one could simply use:

const [value, dispatchValue] = useReducer(valueReducer, 0);
const [count, dispatchCount] = useReducer(countReducer, 0);

But this seems to not be self-explanatory on what the reducer functions actually do (in contrast to setValue which, as the name suggests, sets the value).

Naming these by their action names, for example:

const [value, incrementValue] = useReducer(valueReducer, 0);
const [count, multiplyCount] = useReducer(countReducer, 0);

Seems to be better but these on the other hand don't inform strictly that we use the dispatch/reducer hook anymore.

Answer 1

Instead of using reducerX, reducerY you better use the proper naming convention for this:

const [value, incrementValue] = useReducer(valueReducer, 0);
const [count, multiplyCount] = useReducer(countReducer, 0);

And also for the reducer function name better to use setValue instead of incrementValue

follow same for the other functions and variables.

Answer 2

Some common practices and recommendations can improve the readability and maintainability of your code. These practices are often guided by principles of clarity and consistency:

-Action Types:

Use uppercase and underscored names for action types to make them easily distinguishable. For example FETCH_DATA, INCREMENT_COUNT. Action Creators:

Use camelCase for action creator function names. For example: fetchData, incrementCount.

-Reducer Function:

Name the reducer function based on the state it manages. For example, if it manages the state of a counter, you might name it counterReducer. State Variables:

When using the useReducer hook, the second element of the returned array is often named dispatch for the dispatch function. The first element, representing the current state, can be named based on what it represents in your application context.

// Action Types
const FETCH_DATA = 'FETCH_DATA';
const INCREMENT_COUNT = 'INCREMENT_COUNT';

// Action Creators
const fetchData = () => ({ type: FETCH_DATA });
const incrementCount = () => ({ type: INCREMENT_COUNT });

// Reducer Function
const counterReducer = (state, action) => {
  switch (action.type) {
    case FETCH_DATA:
      // Handle data fetching logic
      return state;
    case INCREMENT_COUNT:
      // Handle count increment logic
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

// Example usage in a component
const [state, dispatch] = useReducer(counterReducer, { count: 0 });

// Dispatching actions
dispatch(fetchData());
dispatch(incrementCount());