Why is my redux props nested inside of another? - react-native

Question

When I call my props I have to use the below. Is this normal? or am I doing something that's off? everything works. props has data, it's just alway nested in something and I have to pull it out from multiple levels
props.posts.posts
Is there a reason why it's nested in a posts? Am I doing something redundant?
import { ScrollView, StyleSheet, Text, View, FlatList } from 'react-native';
import Feed from './components/Feed';
import { Provider } from 'react-redux';
import store from './store/configureStore'
function App() {
return (
<Provider store={store}>
<View style={styles.container}>
<Feed />
</View>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
feed.js
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, FlatList} from "react-native";
import { connect } from 'react-redux';
import { fetchAPI } from '../actions';
const Feed = (props) => {
useEffect(() => {
props.fetchAPI();
}, []);
console.log(props)
return (
<View style={styles.container}>
<FlatList
data={props.posts.posts}
renderItem={({item, index}) => (
<View key={index}>
<Text>{item.id}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
const dispatchToProps = (dispatch) => {
return {
fetchAPI: () => dispatch(fetchAPI()),
};
};
const stateToProps = (state) => ({
posts: state.posts,
});
export default connect(stateToProps, dispatchToProps)(Feed);
action
import { FETCH_POSTS } from "./types";
export const fetchAPI = () => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((response) => {
dispatch({
type: FETCH_POSTS,
payload: response,
// again don't know where payload is coming from
});
})
.catch((error) => console.log(error));
};
reducer.js
import { FETCH_POSTS } from '../actions/types';
const initialState = {
posts: []
}
export default (state = initialState, action) => {
switch(action.type) {
case FETCH_POSTS:
return {...state, posts: action.payload}
default:
return state;
}
}

Answer 1

Yes. your approach works fine too. However I recommend some minor changes.
Action
import { FETCH_POSTS } from "./types";
export const fetchAPI = () => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then(({posts}) => { //changes added here
dispatch({
type: FETCH_POSTS,
payload: posts, //changes added here
});
})
.catch((error) => console.log(error));
};
Feed.js
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, FlatList} from "react-native";
import { connect } from 'react-redux';
import { fetchAPI } from '../actions';
const Feed = (props) => {
useEffect(() => {
props.fetchAPI();
}, []);
console.log(props)
return (
<View style={styles.container}>
<FlatList
data={props.posts} //changes added here
renderItem={({item, index}) => (
<View key={index}>
<Text>{item.id}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
const dispatchToProps = (dispatch) => {
return {
fetchAPI: () => dispatch(fetchAPI()),
};
};
const stateToProps = (state) => ({
posts: state.posts,
});
export default connect(stateToProps, dispatchToProps)(Feed);
Hope this helps. Let me know if the code works or not. Cheers!