为什么我的redux道具嵌套在另一个道具中

Question

当我调用我的道具时，我必须使用以下内容。这正常吗？还是我在做一些不正常的事情？一切正常。道具有数据，它总是嵌套在某个东西中，我必须从多个级别的中提取它

props.posts.posts

它嵌套在帖子中有原因吗？我在做一些多余的事情吗？

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);

动作

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

是。你的方法也很有效。不过，我建议做一些小改动。

操作

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);

希望这能有所帮助。让我知道代码是否有效。干杯