How do you split action into multiple action in react redux? - reactjs

Question

I have an api that give my react app data
{
"data_for_action1": ...
"data_for_action2": ...
"data_for_action3": ...
}
To propagate the data through redux I can
this.props.reduxAction1({
"data_for_action1": ....
})
this.props.reduxAction2({
"data_for_action2": ....
})
this.props.reduxAction3({
"data_for_action3": ....
})
export default connect(
mapStateToProps,
{ reduxAction1, reduxAction2, reduxAction3 }
)(MyComponent);
Call all redux action successively, but the problem is that I have to do this for all component that use this api.
Is there a way to split this in action function instead
export const myCombineReduxAction = myInfo => {
// call reduxAction1, reduxAction2, and reduxAction3
}
instead of
export const reduxAction1 = myInfo => ({
type: ActionType1,
payload: { myInfo }
});
export const reduxAction2 = myInfo => ({
type: ActionType2,
payload: { myInfo }
});
export const reduxAction3 = myInfo => ({
type: ActionType3,
payload: { myInfo }
});

Answer 1

I think so:-
You could create a custom function in your reducer:
given if all your action use the same dispatch from the same reducer
args or props passed to the custom function could be anything. But a make sure to pass the dispatch too
in reducer:-
export const myCombineReduxAction = (dispatch, myInfo) => {
// then run whatever dispatch here
dispatch({
type: ActionType1,
payload: { myInfo }
})
dispatch({
type: ActionType2,
payload: { myInfo }
})
dispatch({
type: ActionType2,
payload: { myInfo }
})
}
in demo component:-
import { useDispatch } from "react-redux";
import { myCombineReduxAction } from "../redux/reducer/whateverReducer";
const Demo = () => {
const dispatch = useDispatch();
const getData = () => {
const myInfo = 'something'
myCombineReduxAction(dispatch, myInfo)
}
return (<>Something</>)
}

Answer 2

If you use thunk you can do the following:
export const myCombineReduxAction = (myInfo) => (
dispatch
) => {
dispatch(reduxAction1(myInfo));
dispatch(reduxAction2(myInfo));
dispatch(reduxAction3(myInfo));
};