react-native - 为什么我的 redux 道具嵌套在另一个里面？

Question

当我调用我的道具时，我必须使用以下内容。这是正常的吗？还是我在做一些不正常的事情？一切正常。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;

饲料.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));
};

减速器.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;
    }
}

标签： react-nativereduxreact-redux

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

希望这可以帮助。让我知道代码是否有效。干杯!