react redux not displaying the correct data

Question

i've taken a few courses on react and redux and so far the challenges are still piling up. i'm creating a simple app were at the time i need to just map the response from the api, but the state looks weird. the actions is returning the data, but is being displayed awkward. Please see the images attached. Does anyone know why the console.log of the data returns a number instead of an object or array name? also if you see the state from the redux dev tools, you can see that where an object name would be displayed, you see undefined instead. Please help. I've been at it for a couple of days and have been banging my head against the wall. enter image description here

reducer
import _ from 'lodash';

import { 
FETCH_CLIENT,
FETCH_CLIENTS,
ADD_CLIENTS_COMMENTS
} from "../actions/types";

export default (state = {}, action) => {
switch (action.type) {
case FETCH_CLIENT:
  return { ...state, ..._.mapKeys(action.payload, 'ClientUno') };
case FETCH_CLIENTS:
  return { ...state, [action.payload.ClientUno]: action.payload };
case ADD_CLIENTS_COMMENTS:
    return { ...state, [action.payload.ClientUno]: action.payload }; 
default:
  return state;
}
 };
 
combined reducer
import { combineReducers } from "redux";
import ClientsReducer from "./ClientsReducer";

export default combineReducers({
clients:ClientsReducer
});

action
const mapStateToProps = state => {
return{
    clients:Object.values(state.clients),
}
}

export default connect(mapStateToProps,{fetchAllClients})(Clients);

after removing .ClientUno. This my new state

post man response attached

Really hard to say what's going on without seeing actual code. Can you please post the relevant reducer logic? — markerikson
– markerikson, Commented Jun 12, 2022 at 19:27

markerikson · Accepted Answer · 2022-06-12 22:16:02Z

1

It looks like your reducer logic is wrong:

return { ...state, [action.payload.ClientUno]: action.payload }

Per the screenshots, your action.payload is an array of items. The individual items do have a .ClientUno field inside them. But the array most definitely will not. So, action.payload.ClientUno is indeed undefined, and that's what you're using as a key.

You'll need to rethink what you want to use as a key there. I don't know how you're actually trying to structure this slice state, so I can't provide a suggestion there.

I will note that the Redux patterns you're using here are very outdated. "Modern Redux" with Redux Toolkit is much simpler and easier to use - there's no "ACTION_TYPES", switch statements, or object spreads. Please see our official Redux docs tutorials to learn how to use Redux Toolkit:

https://redux.js.org/tutorials/index

answered Jun 12, 2022 at 22:16

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Thecruz Over a year ago

i tried the new approach first with the toolkit and the result was the same. This was a cry for help cause it just did not make any sense.

markerikson Over a year ago

The real problem here is the use of action.payload.ClientUno. That field does not exist! You can't use it, no matter whether you're writing the reducer logic by hand, or using RTK.

Thecruz Over a year ago

when i remove that field my new state looks like the attached.

Thecruz Over a year ago

the data comes out of the api normal. i've also attached a postman response

markerikson Over a year ago

@Thecruz : Your response data is an array. That's fine - that's typically what comes back from an API request like "list some items". So, your reducer needs to deal with that data as if it's an array, not as if it's an object. Looking at the last Redux DevTools screenshot, that seems to be what it's doing now. Is there some other problem still?

|

Collectives™ on Stack Overflow

react redux not displaying the correct data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related