My boiler plate middleware setup in redux is not working, I have looked at the documentation and articles all of whom are using createStore instead of configureStore and wondering if that may be the reason. (in the following code nothing is console.log when I dispatch any of my functions)
function logger({ getState }) {
return (next) => (action) => {
console.log("will dispatch", action);
const returnValue = next(action);
console.log("state after dispatch", getState());
return returnValue;
};
}
export const store = configureStore(
{
reducer: {
auth: authReducer,
orders: ordersReducer,
dashboard: dashboardReducer,
portfolio: portfolioReducer,
},
},
applyMiddleware(logger)
);
2nd try:
export const logger = (store) => (next) => (action) => {
console.log("hello from middleware");
return next(action);
};
export const store = configureStore(
{
reducer: {
auth: authReducer,
orders: ordersReducer,
dashboard: dashboardReducer,
portfolio: portfolioReducer,
},
},
applyMiddleware(logger)
);
My dispatches are using createAsyncThunk, not sure if this changes the middleware, an example:
export const getCurrentHoldings = createAsyncThunk(
"/portfolio/getCurrentHoldings",
async (value, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
const userID = thunkAPI.getState().auth.user._id;
const newObj = {
token: token,
userID: userID,
};
let url = `http://localhost:3001/api/portfolio/getCurrentHoldings`;
const response = await axios.post(url, newObj);
console.log("New request ran in getCurrentHoldings");
return response.data;
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
As a note, before I tried adding my own middleware I actually had thunk as the middleware (or I thought I did) as I thought thats what was required to get my thunk functions to work but after removing it my code continued to work and im assuming its becuase createAsyncThunk does not require thunk in middleware, but would like clarification on that, thanks. original code:
export const store = configureStore(
{
reducer: {
auth: authReducer,
orders: ordersReducer,
dashboard: dashboardReducer,
portfolio: portfolioReducer,
},
},
applyMiddleware(thunk)
);