Why is the thunk function in React Native Redux not working, but the action function does?

Question

I'm trying to build a React Native app with Redux-thunk I built the action and the reducer and I created the porvider and store and I called the action inside the useEffect in the component.

The problem: The problem is that the data does not reach the slider component, so I put the console.log("before async function") in the action, The console prints the log. But when I put the console.log("inside async function"), Console does not print

Please help with the solution, thank you

package.json

{
  "name": "rawamovies",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "axios": "^0.24.0",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-redux": "^7.2.6",
    "redux-thunk": "^2.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/runtime": "^7.16.7",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.4.6",
    "eslint": "^8.6.0",
    "jest": "^27.4.7",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {compainReducers} from './Redux/Reducer/CombainReducer';
import {Home} from './Screens/Home';

//start create redux store
const store = createStore(compainReducers, applyMiddleware(thunk));

//end create redux store

const App = () => {
  return (
    <Provider store={store}>
      <View>
        <Home></Home>
        <Text>sss</Text>
      </View>
    </Provider>
  );
};

export default App;

action.js

import {
  POPULAR_MOVIES_REQUEST,
  POPULAR_MOVIES_FAIL,
  POPULAR_MOVIES_SUCCESS,
} from '../constents/getMovieconstents';
import axios from 'axios';
const KEY_V3 = '8ce99c09a3e30f614c';
const initURL = 'https://api.themoviedb.org/3';

export const popularMoviesAction = (pageNum = 1) => {
  console.log('before async function');
  return async dispatch => {
console.log("inside async function")
    dispatch({action: POPULAR_MOVIES_REQUEST});

    try {
      const popularMovies = await axios.get(
        `${initURL}/movie/popular?api_key=${KEY_V3}&page=${pageNum}`,
      );
      dispatch({action: POPULAR_MOVIES_SUCCESS, payload: popularMovies});
    } catch (err) {
      dispatch({action: POPULAR_MOVIES_FAIL, payload: err});
    }
  };
};

reducer.js

import {
  POPULAR_MOVIES_REQUEST,
  POPULAR_MOVIES_FAIL,
  POPULAR_MOVIES_SUCCESS,
} from '../constents/getMovieconstents';

export const themeReducer = (state = false, action) => {
  return state;
};

const initPopularMovies = {popularMovies: [], Loading: false, error: ''};
export const popularMoviesReducer = (state = initPopularMovies, action) => {
  switch (action) {
    case POPULAR_MOVIES_REQUEST:
      return {...state, Loading: true};
    case POPULAR_MOVIES_SUCCESS:
      return {...state, popularMovies: action.payload, Loading: false};
    case POPULAR_MOVIES_FAIL:
      return {...state, error: action.payload, Loading: false};
  }

  return state;
};

slider.js component

import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import {popularMoviesAction} from '../Redux/Actions/GetDataAction';
import {useSelector} from 'react-redux';
export function Slider() {
  const state = useSelector(state => state.popularMovies);
  console.log('fetch data', state);
  useEffect(() => {
    popularMoviesAction();
  }, []);

  return (
    <View>
      <Text></Text>
    </View>
  );
}

enter image description here

Answer 1

You need to dispatch it, like

useEffect(() => {
   dispatch(popularMoviesAction());
  }, []);