为什么 React Native Redux 中的 thunk 函数不起作用,而 action 函数却起作用?
Why is the thunk function in React Native Redux not working, but the action function does?
我正在尝试使用 Redux-thunk
构建 React Native 应用程序
我构建了 action
和 reducer
,创建了 porvider
和 store
,然后在组件的 useEffect
中调用了操作。
问题:问题是数据没有到达滑块组件,所以我把console.log("before async function")放在action中,控制台打印log。
但是当我输入 console.log("inside async function") 时,控制台不打印
请帮忙解答,谢谢
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分量
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
需要发货,赞
useEffect(() => {
dispatch(popularMoviesAction());
}, []);
我正在尝试使用 Redux-thunk
构建 React Native 应用程序
我构建了 action
和 reducer
,创建了 porvider
和 store
,然后在组件的 useEffect
中调用了操作。
问题:问题是数据没有到达滑块组件,所以我把console.log("before async function")放在action中,控制台打印log。 但是当我输入 console.log("inside async function") 时,控制台不打印
请帮忙解答,谢谢
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分量
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
需要发货,赞
useEffect(() => {
dispatch(popularMoviesAction());
}, []);