react native redux data not getting from store after action dispatch

Question

i am starting to learn react native with redux. i am trying to get data from api , and dispatch action and get data from store

i am getting the data from api but unable to receive it in component after dispatching the action.

//here i am dispatching the action

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"
            })
        })

    }
}

in root reducer

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

my console logs are

 (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

In your action you dispatch the following:

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

But in your reducer, you don't handle action.peoples:

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

You need to match your naming up.