為什么ReactNativeRedux中的thunk函式不起作用，但action函式起作用？

我正在嘗試構建一個 React Native 應用程式，Redux-thunk 我構建了action andreducer我創建了porviderandstore我在組件中呼叫了操作 useEffect。

問題：問題是資料沒有到達滑塊組件，所以我把console.log("before async function")放在action中，控制臺列印日志。但是當我把console.log("inside async function")，控制臺不列印

請幫忙解決一下，謝謝

包.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"
  }
}

應用程式.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;

動作.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});
    }
  };
};

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

滑塊.js 組件

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

在此處輸入影像描述

uj5u.com熱心網友回復：

您需要發送它，例如

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

標籤：

上一篇：反應原生onPress和props

下一篇：在父組件內添加一個N次的子組件（基于狀態值）