How use useSelector and useDispatch properly with redux-thunk? Redux , React-redux, redux-thunk

Installation

To install the stable version:           

# NPM

npm install redux

# Yarn

yarn add redux

Complementary Packages Most likely, you'll also need the React bindings and the developer tools.

 npm install --save react-redux 

yarn add react-redux

Redux Thunk

Thunk middleware for Redux.

npm install --save redux-thunk

yarn add redux-thunk

Types.js

export const FETCHING_PEOPLE_REQUEST = 'FETCHING_PEOPLE_REQUEST';

export const FETCHING_PEOPLE_SUCCESS = 'FETCHING_PEOPLE_SUCCESS';

export const FETCHING_PEOPLE_FAILUR = 'FETCHING_PEOPLE_FAILURE';

App.js

import React, {Component} from 'react';

import AppContainer from './app/containers/appContainer';

import {createStore, applyMiddleware} from 'redux';

import {Provider} from 'react-redux';

import thunk from 'redux-thunk';

import peopeleReducer from './app/redux/actions/reducers/peopleReducer';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(peopeleReducer);

export default class App extends Component {

render() {

return (

<Provider store={store}>

<AppContainer />

</Provider>

);

}

}

appContainer.js

import React, {Component, useEffect} from 'react';

import {StyleSheet, View, ActivityIndicator} from 'react-native';

import PeopleList from '../components/peopleList';

import {fetchPeople} from '../redux/actions/peopleActions';

import {connect, useDispatch, useSelector} from 'react-redux';

const AppContainer = (props) => {

const peopleData = useSelector((state) => {

console.log('State Response', state);

return {

randomPeople: state,

};

});

const dispatch = useDispatch();

useEffect(() => {

dispatch(fetchPeople());

}, [dispatch]);

let content = <PeopleList resData={peopleData.randomPeople.resData} />;

console.log('randomPeople res', peopleData.randomPeople);

if (peopleData.randomPeople.isFetching) {

content = <ActivityIndicator size="large" />;

}

return <View style={styles.container}>{content}</View>;

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#ffffff',

},

});

const mapStateToProps = (state) => {

console.log(state);

};

export default AppContainer;

peopleActions.js

import {

FETCHING_PEOPLE_REQUEST,

FETCHING_PEOPLE_SUCCESS,

FETCHING_PEOPLE_FAILURE,

} from './types';

export const fetchingPeopleRequest = () => ({type: FETCHING_PEOPLE_REQUEST});

export const fetchingPeopleSuccess = (json) => ({

type: FETCHING_PEOPLE_SUCCESS,

payload: json,

});

export const fetchingPeopleFailure = (error) => ({

type: FETCHING_PEOPLE_FAILURE,

payload: error,

});

export const fetchPeople = () => {

return async (dispatch) => {

dispatch(fetchingPeopleRequest());

try {

let response = await fetch('https://randomuser.me/api/?results=15');

let json = await response.json();

console.log('response', response);

dispatch(fetchingPeopleSuccess(json.results));

} catch (error) {

dispatch(fetchingPeopleFailure(error));

console.log('error', error);

}

};

};

peopleReducer.js

import {

FETCHING_PEOPLE_REQUEST,

FETCHING_PEOPLE_SUCCESS,

FETCHING_PEOPLE_FAILUR,

} from '../../actions/types';

const initialState = {

iaFetching: false,

errorMessage: '',

resData: [],

};

const peopeleReducer = (state = initialState, action) => {

switch (action.type) {

case FETCHING_PEOPLE_REQUEST:

return {...state, isFetching: true};

case FETCHING_PEOPLE_FAILUR:

return {...state, isFetching: false, errorMessage: action.payload};

case FETCHING_PEOPLE_SUCCESS:

return {...state, isFetching: false, resData: action.payload};

default:

return state;

}

};

export default peopeleReducer;

Thank You