Question

我开始学习与redux本地反应。我正在尝试从api获取数据，并调度操作并从商店获取数据

我从api获取数据但在调度操作后无法在组件中接收数据。

//我在这里发送行动

import { connect } from 'react-redux'

import { fetchPeopleFromAPI } from './actions'



class App extends Component {

  constructor(props){

    super(props);

    this.state = { people : [] , message : "" }

  }


 componentWillReceiveProps(newProps) {
console.log('componentWillReceiveProps............ from edit');
console.log(newProps)

this.setState({ people : newProps.people})

console.log("newwwwwwwwwwwww",this.state.people)

 }


  getpeople = () =>{

    console.log("sdsdsd");

    this.props.dispatch(fetchPeopleFromAPI())

    console.log("sddddddddddddddd", this.props.people)


  }

  render() {

    return (

      <View style={styles.container}>

        <TouchableHighlight style={styles.button} onPress={ this.getpeople } >
          <Text style={styles.buttonText}>Load People</Text>
        </TouchableHighlight>
      </View>



    );
  }
}

function mapStateToProps(state) {
  return {
    people:state.people.peoples
  }
}

export default connect(mapStateToProps)(App)

in action.js

import axios from 'axios';

export function fetchPeopleFromAPI() {
    return (dispatch) => {
        return axios.get('https://swapi.co/api/people/', {
            headers: { 'Content-Type': 'application/json', 'mode': 'no-cors' },
        }).then(data => 
            {
            console.log(data.data.results)

            dispatch({
                type: 'FETCHING_PEOPLE_SUCCESS',
                peoples: data.data.results
            })

            }).catch(function (error) {

            dispatch({
                type: 'FETCHING_PEOPLE_FAILURE',
                message : "FETCH ERROR"
            })
        })

    }
}

中的

import React, { Component } from 'react';

import { combineReducers } from 'redux'  // import combine reducer from  redux to combine all of your reducers
import people from './people'   // import other reducers

const rootReducer = combineReducers({
    people
})                                 // it takes object , give all imported reducers one by one


export default rootReducer

in people reducer

const initialState = {
    people: [],
    isFetching: false,
    error: false
}





export default function peopleReducer(state = initialState, action) {  
    switch (action.type) {
        case "FETCHING_PEOPLE":
            return {
                ...state,
                people: [],
                isFetching: true
            }
        case "FETCHING_PEOPLE_SUCCESS":
            return {
                ...state,
                isFetching: false,
                people: action.data
            }
        case "FETCHING_PEOPLE_FAILURE":
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

我的控制台日志是

 (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}1: {name: "C-3PO", height: "167", mass: "75", hair_color: "n/a", skin_color: "gold", …}2: {name: "R2-D2", height: "96", mass: "32", hair_color: "n/a", skin_color: "white, blue", …}3: {name: "Darth Vader", height: "202", mass: "136", hair_color: "none", skin_color: "white", …}4: {name: "Leia Organa", height: "150", mass: "49", hair_color: "brown", skin_color: "light", …}5: {name: "Owen Lars", height: "178", mass: "120", hair_color: "brown, grey", skin_color: "light", …}6: {name: "Beru Whitesun lars", height: "165", mass: "75", hair_color: "brown", skin_color: "light", …}7: {name: "R5-D4", height: "97", mass: "32", hair_color: "n/a", skin_color: "white, red", …}8: {name: "Biggs Darklighter", height: "183", mass: "84", hair_color: "black", skin_color: "light", …}9: {name: "Obi-Wan Kenobi", height: "182", mass: "77", hair_color: "auburn, white", skin_color: "fair", …}length: 10__proto__: Array(0)
App.js:27 componentWillReceiveProps............ from edit
App.js:28 {people: undefined, dispatch: ƒ}dispatch: ƒ (action)people: undefined__proto__: Object
App.js:32 newwwwwwwwwwwww []length: 0__proto__: Array(0)

Answer 1

在您的操作中，您将发送以下内容：

dispatch({
    type: 'FETCHING_PEOPLE_SUCCESS',
    peoples: data.data.results
})

但是在你的reducer中，你没有处理action.peoples：

case "FETCHING_PEOPLE_SUCCESS":
    return {
        ...state,
        isFetching: false,
        people: action.data
    }

您需要匹配您的命名。

在动作调度后，本机redux数据无法从存储中获取

1 个答案: