为什么我的 redux 道具嵌套在另一个里面？答案

【问题标题】：Why is my redux props nested inside of another?为什么我的 redux 道具嵌套在另一个里面？
【发布时间】：2021-05-08 00:24:51
【问题描述】：

当我调用我的道具时，我必须使用以下内容。这是正常的吗？还是我在做一些不正常的事情？一切正常。 props 有数据，它总是嵌套在某个东西中，我必须从多个层次中将其拉出来

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

【问题讨论】：

payload: response, 中response 的值是多少？响应是具有posts 属性的对象吗？如果是这样，请尝试将其更改为 payload: response.posts。

标签： react-native redux react-redux

【解决方案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);

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

【讨论】：