Example of a react-redux frontend using redux-axios-middleware that calls a .NET Core Web API

The frontend is written in react with a redux architecture. Actions and reducers can handle APi calls thank to redux-axios-middleware.

Here is an example of a single action handling both request and response from the API.

Request action

{
    type: 'API_CALL_NAME',
    payload: {
        request: AxiosRequestConfig
    }
}

Response action

success action

{
    type: 'API_CALL_SUCCESS',
    payload: AxiosResponse
}

fail action

{
    type: 'API_CALL_FAIL',
    payload: AxiosResponse
}

Request reducer

In general, you should avoid using request reducer to update the state.

Depending on your use cases, request reducer can be directly used to give the feeling that the request has already been handled by the server. In case it doesn't, the FAIL action should be used to alert the user that there was a failure.

case Actions.INCREMENT:
    return {
        ...state,
        values: state.values.map(v => {
            if (v.name === action.payload.request.data.valueName) {
                return {
                    ...v,
                    value: v.value + 1
                };
            }

            return v;
        })
    };

Response reducer

case Actions.GET_VALUES_SUCCESS:
    return {
        ...state,
        values: action.payload.data
    };

The backend is written using ASP.NET Core. It simply contains API routes used by the frontend.

Example of a web app that use simple API requests : increment or decrement named values.