React/Redux - Issue iterating json from mapStateToProps - json

Question

I have a React Native app on which I'm trying to apply Redux. It's the first time I try to use Redux, so I think I'm not seeing the elephant in the room.
The problem is that I can't access my props data (generated with mapStateToProps). Here's my code:
reducer.js (in the console log I see the json objects just fine)
const INITIAL_STATE = {
etiquetas: []
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCH_ETIQUETAS_SUCCESS:
//console.log("payload: "+action.payload);
return { ...state, etiquetas: action.payload };
default:
return state;
}
};
component.js (in the console.log I see my data, BUT it seems that it's all in one object now, this is probably what I'm not seeing).
class EtiquetasList extends Component {
componentDidMount() {
this.props.FetchEtiquetas();
}
renderEtiquetas() {
//console.log("etq: "+JSON.stringify(this.props.etiquetas));
if ( this.props.etiquetas.length == 0 ) {
return <ActivityIndicator size="large" color="#00ff00" />
} else {
return this.props.map(etiqueta =>
<EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} />
);
}
}
render() {
return (
<ScrollView>
{this.renderEtiquetas()}
</ScrollView>
);
}
}
const mapStateToProps = (state) => {
return {
etiquetas: state.etiquetas
};
};
export default connect(mapStateToProps, { FetchEtiquetas })(EtiquetasList);
The map function is for Arrays, not Objects, I know. That's part of my old code.
action.js
import axios from 'axios';
import { FETCH_ETIQUETAS, FETCH_ETIQUETAS_SUCCESS, FETCH_ETIQUETAS_FAILURE } from './types';
const url= 'https://e.dgyd.com.ar/wp-json/wp/v2/etiquetas?_embed&per_page=7';
const fetchSuccess = (dispatch, data)=> {
dispatch({
type: FETCH_ETIQUETAS_SUCCESS,
payload: data
});
}
export function FetchEtiquetas() {
return function (dispatch) {
axios.get( url )
.then(response => {
dispatch({ type: FETCH_ETIQUETAS_SUCCESS, payload: response.data })
} );
}
}
reducers/index.js
import { combineReducers } from 'redux';
import DataReducer from './DataReducer';
export default combineReducers({
etiquetas: DataReducer
});
So, my questions are:
Why is is this always returning undefined?
this.props.etiquetas.length == 0
Why mapStateToProps seems to convert my array of objects into a single object? is this why I have to use JSON.stringify in the console log?
and finally, how do I access my data in the component?
Thank you much in advance!

Answer 1

The problem here, is just the way that you structured your reducer.
const INITIAL_STATE = {
etiquetas: []
};
The code above means that you are creating an object, with a property named "etiquetas" that holds an empty array initially.
In your root reducer file, you import that object, and assign it the name, "etiquetas". So really what your reducer is returning is this:
etiquetas: {
etiquetas: [your array of data]
}
This would explain why you complained about receiving an object. There are two ways to rectify this,
One: Change the mapStateToProps function to this,
const mapStateToProps = (state) => {
return {
etiquetas: state.etiquetas.etiquetas
};
};
Two: Change your reducer to look like this,
export default (state = [], action) => {
switch (action.type) {
case FETCH_ETIQUETAS_SUCCESS:
//console.log("payload: "+action.payload);
return action.payload;
default:
return state;
}
};
This will make sure your reducer returns just an array, not an object with an array inside of it stored in a property. Its up to you to decide which you like better.