Most of my redux actions are 'fetch some data from the database, here's the authentication token', and they for the most part look the same, like this:
action creator
export const fetchDashboard = jwt => async dispatch => {
dispatch(fetchDashboardRequest());
try {
const response = await axios.get(
DASHBOARD_ENDPOINT,
{
headers: {
Authorization: `Bearer ${jwt}`,
},
}
);
dispatch({
type:
Action.FETCH_DASHBOARD_SUCCESS,
payload: response.data.dashboard,
});
} catch (error) {
dispatch({
type:
Action.FETCH_DASHBOARD_FAILURE,
payload: flatmapErrors(
error.response.data
),
});
}
};
reducer
export default (
state = initialState,
action
) => {
switch (action.type) {
case Action.FETCH_DASHBOARD_SUCCESS:
return {
...state,
...action.payload
};
case Action.FETCH_DASHBOARD_FAILURE:
return {}
case Action.DASHBOARD_CLEAR_DATA : {
return {};
}
default:
return state;
}
};
This is a fair bit of boilerplate, and I end up using VSCode snippets to generate it.
I end up editing the endpoint constant, for some, the headers might change, and there might be some parsing on the data structure, but for the most part, the API gives me the data as I need it.
But over more and more actions, I'm worried that this isn't DRY, and that a refactor later might be a pain.
Is this a worth while concern, or should I consider this just necessary boilerplate?