Redux doesn't save state even reaching type [Solved]

Question

Update:I think I found my problem I somehow access my state by useSelector(state => state.auth) which didn't save my ordersReducer.

please help me. I have this code that I already reached SAVE_ORDERS_SUCCESS but it doesn't save the state of it. Here are my codes. FYI, I have another reducer to update auth and it works.

my call

dispatch(getOrdersList())
    .then(() => console.log('save'))
    .catch(err => console.log('eeeS'));

api call

const getOrdersList = (data = {}) => {
  const url = `get_all_order`;
  const user = JSON.parse(localStorage.getItem('user'));

  const headers = {
    access_token: user.data.token
  };

  const body = {
    ...data,
    type: data.admin_id ? null : 'super'
  };

  return apiCall(url, body, headers).then(response => response);
};

export default {
  getOrdersList
};

My reducer

import {
  SAVE_ORDERS_SUCCESS,
  SAVE_ORDERS_FAILURE,
  GETTING_DATA
} from 'actions/types';

const initialState = {
  ordersData: null,
  isLoading: false,
  error: null
};

export default function (state = initialState, action) {
  const { type, payload } = action;
  console.log(' ~ file: getOrdersReducer.js:15 ~ payload:', payload);

  switch (type) {
    case GETTING_DATA:
      return { ...state, isLoading: true, error: null };
    case SAVE_ORDERS_SUCCESS:
      return { ...state, isLoading: false, ordersData: payload.response };
    case SAVE_ORDERS_FAILURE:
      return { ...state, isLoading: false, error: action.payload };
    default:
      return state;
  }
}

combine

import { combineReducers } from 'redux';
import auth from './auth';
import message from './message';
import getOrdersReducer from './getOrdersReducer';

export default combineReducers({
  getOrdersReducer,
  auth,
  message
});

type and store

export const GETTING_DATA = 'GETTING_DATA';
export const SET_MESSAGE = 'SET_MESSAGE';
export const CLEAR_MESSAGE = 'CLEAR_MESSAGE';

export const SAVE_ORDERS_SUCCESS = 'SAVE_ORDERS_SUCCESS';
export const SAVE_ORDERS_FAILURE = 'SAVE_ORDERS_FAILURE';

import { legacy_createStore as createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const middleware = [thunk];

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

I tried to console.log payload at case SAVE_ORDERS_SUCCESS still see it but the return doesn't save in store.

It's a little hard to follow without context; where is `SAVE_ORDERS_SUCCESS` dispatched? — Dave Newton, Mar 02 '23 at 17:21
Possibly it should be `ordersData: payload` instead of `ordersData: payload.response`? But there's not enough information here to do anything more than guess. — Linda Paiste, Mar 02 '23 at 17:36
I used `dispatch(getOrdersList())` to call action type `SAVE_ORDERS_SUCCESS`. I think I found my problem I somehow access my state by `useSelector(state => state.auth)` which didn't save my `ordersReducer`. — Long.TH, Mar 02 '23 at 17:39

score 1 · Answer 1 · answered Mar 02 '23 at 18:35

You're not returning a action with the getOrdersList function simply the response.

The dispatch expects this a object with a type and a payload

const { type, payload } = action;

But instead receives only the response

const getOrdersList = (data = {}) => {
  // ...

  return apiCall(url, body, headers).then((response) => response);
};

Since the reducer receives no type it will fallback to the default and return the state. You can solve this by doing this instead:

const getOrdersList = (data = {}) => {
  // ...

  const data = apiCall(url, body, headers).then((response) => response);

  return {
    type: SAVE_ORDERS_SUCCESS,
    payload: data,
  };
};

I found my problems but still thank you! – Long.TH Aug 28 '23 at 20:54 — Long.TH, Aug 28 '23 at 20:54

Redux doesn't save state even reaching type [Solved]

1 Answers1