Can I use custom error actions to handle both API errors and user input errors

javascript
// actions.js
import { createAction } from '@reduxjs/toolkit';

const errorAction = createAction('ERROR');

export const setError = (error) => errorAction(error);

// reducers.js
import { createReducer } from '@reduxjs/toolkit';
import { setError } from './actions';

const initialState = {
  error: null,
};

const errorReducer = createReducer(initialState, {
  [setError.type]: (state, action) => {
    state.error = action.payload;
  },
});

export default errorReducer;

// components.js
import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setError } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data))
          .catch((error) => dispatch(setError(error)));
  }, []);

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

In this example, we create an `setError` action creator that dispatches the `ERROR` action with the error message. In the reducer, we handle this action by updating the state with the error message.

To handle user input errors, you can create a separate action creator for that. For example:

javascript
// actions.js
import { createAction } from '@reduxjs/toolkit';

const errorAction = createAction('ERROR');

export const setError = (error) => errorAction(error);

export const validateInput = (input) => {
  if (!input) {
    return setError('Input is required');
  }
  return setError(null);
};

Then, in your component, you can use this action creator to handle user input errors:

javascript
// components.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { validateInput } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const [input, setInput] = useState('');

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInput(value);
    dispatch(validateInput(value));
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      {input && <p>Input: {input}</p>}
    </div>
  );
};

export default MyComponent;

In this example, we create a `validateInput` action creator that checks if the input is valid. If it's not, it dispatches the `ERROR` action with an error message. In the component, we use this action creator to handle user input errors.

By using custom error actions, you can handle both API errors and user input errors in a centralized and robust manner.