Hello
I am hoping to get some help with the API portion of the ultimate redux course. I have double checked that I have followed Mosh’s coding to the letter and seem to be missing something.
What mosh is doing is getting data out of the backend using the api middleware he built earlier in the section, in order to add bugs to the state. Mosh gets this in his inspector:
- api/callBegan
- api/callSuccess
- bugs/bugsReceived
Mosh triggers the bugsReceived reducer and it adds the list of bugs received from the server to the State.
What I get is this:
- api/callBegan
- api/callSuccess
- api/callSuccess
I can see that the data is in the payload but I am not able to get the bugsReceived reducer to trigger, so the payload is not loaded into the state.
Would someone be able to take a look at the following code in case they can see what I am doing wrong? Thank you!
index.js
import configureStore from './store/configureStore';
import { loadBugs } from './store/bugs';
const store = configureStore();
store.dispatch(loadBugs());
bugs.js - this is the bugs slice
import { createSlice } from '@reduxjs/toolkit';
import { createSelector } from 'reselect';
import { apiCallBegan } from './apiactions';
let lastId = 0;
const slice = createSlice({
name: 'bugs',
initialState: {
list: [],
loading: false,
lastFetch: null,
},
reducers: {
bugsReceived: (bugs, action) => {
bugs.list = action.payload;
},
bugAssignedToUser: (bugs, action) => {
const { bugId, userId } = action.payload;
const index = bugs.list.findIndex((bug) => bug.id === bugId);
bugs.list[index].userId = userId;
},
bugAdded: (bugs, action) => {
bugs.list.push({
id: ++lastId,
description: action.payload.description,
resolved: false,
userId: {},
});
},
bugResolved: (bugs, action) => {
const index = bugs.list.findIndex((bug) => bug.id === action.payload.id);
bugs.list[index].resolved = true;
},
},
});
export const {
bugsReceived,
bugAssignedToUser,
bugAdded,
bugResolved,
} = slice.actions;
export default slice.reducer;
//Action creators
const url = '/bugs';
export const loadBugs = () =>
apiCallBegan({
url,
onSuccess: bugsReceived.type,
});
api.js - this is the api middleware
import axios from 'axios';
import * as actions from '../apiactions';
const api = ({ dispatch }) => (next) => async (action) => {
if (action.type !== actions.apiCallBegan.type) return next(action);
const { url, method, data, onSuccess, onError } = action.payload;
next(action);
try {
const response = await axios.request({
baseURL: 'http://localhost:9001/api',
url,
method,
data,
});
//General
dispatch(actions.apiCallSuccess(response.data));
//Specific
if (onSuccess)
dispatch({ type: actions.apiCallSuccess.type, payload: response.data });
} catch (error) {
//General
dispatch(actions.apiCallFailed(error.message));
//Specific
if (onError)
dispatch({ type: actions.apiCallFailed.type, payload: error.message });
}
};
export default api;
apiactions - these are the actions used by the api
import { createAction } from '@reduxjs/toolkit';
export const apiCallBegan = createAction(`api/callBegan`);
export const apiCallSuccess = createAction(`api/callSuccess`);
export const apiCallFailed = createAction(`api/callFailed`);
configureStore.js, this is the store
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import reducer from './reducer';
import logger from './middleware/logger';
import toast from './middleware/toast';
import api from './middleware/api';
export default function () {
return configureStore({
reducer,
middleware: [
...getDefaultMiddleware(),
logger({ Destination: 'console' }),
toast,
api,
]});}