Returning an array to React component from fetch call in Redux - json

Question

I'm having trouble returning an array to my React component from a fetch call from my Express server, that I set up in Redux.
I'm trying to just return the vitamins array from this json from Express:
router.get('/', function(req, res, next) {
vitamins: [
{
name: "Vitamin B2"
}
],
minerals: [
{
name: "Zinc"
}
]});
});
This is the fetch call and FETCH_VITAMINS_SUCCESS action in my actions.js.
export function fetchVitamins() {
return dispatch => {
return fetch("/users")
.then(res => res.json())
.then(micros => {
dispatch(fetchVitaminsSuccess(micros.vitamins));
return micros.vitamins;
})
};
}
export const FETCH_VITAMINS_SUCCESS = 'FETCH_VITAMINS_SUCCESS';
export const fetchVitaminsSuccess = vitamins => ({
type: FETCH_VITAMINS_SUCCESS,
payload: { vitamins }
});
This is my reducers.js where i'm trying to set the state to "micros.vitamins".
const initialState = {
micros: [],
};
function vitaminReducer(state = initialState, action) {
switch(action.type) {
case FETCH_VITAMINS_SUCCESS:
return {
...state.vitamins,
micros: action.payload
};
default:
return state;
}
}
This is my React component Vitamins.js where I'm importing fetchVitamins() and trying to pass the names of each vitamins to a menu dropdown in an option tag.
componentDidMount() {
this.props.fetchVitamins();
}
renderData() {
const { vitamins } = this.state.micros;
return vitamins.map((micro, index) => {
return (
<option value={micro.value} key={index}>{micro.name}</option>
)
})
}
render() {
return (
<select value={this.props.value}>
{this.renderData()}
</select>
)
}
const mapStateToProps = state => ({
micros: state.vitamins,
});
export default connect(mapStateToProps, { fetchVitamins })(Vitamins);
Right now I get back the error "TypeError: Cannot read property 'micros' of null", highlighting over my renderData() function.

Answer 1

It should be:
const { vitamins } = this.props.micros;
because you pass micros as props from redux. While you tried to access it from the state (which I guess was not initialized that's why it's null).
Another thing, you pass Object in payload:
export const fetchVitaminsSuccess = vitamins => ({
type: FETCH_VITAMINS_SUCCESS,
payload: { vitamins }
});
and set it as micros in your reducer:
switch(action.type) {
case FETCH_VITAMINS_SUCCESS:
return {
...state.vitamins,
micros: action.payload
};
However, your micros are initially an array which may lead to unexpected errors. Maybe you should change your initial state to something resembling the response like:
const initialState = {
micros: {
vitamins: []
},
};
This way const { vitamins } = this.state.micros; will always return some array - before and after the response.