reactjs - 如何获取redux action中包含的数据
问题描述
我正在使用 redux-thunk 调用 api。我想得到包含在动作数据中的结果
如果我查看控制台并看到组件已调度 fetchTrending(),则返回承诺。
请帮助我如何获得结果
TrendMovieContainer.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTrending } from '../actions/index';
import Trending from '../components/Trending';
const TrendMovieContainer = () => {
const title = useSelector(state => state.resluts.title);
//undefined
const dispatch = useDispatch()
const data = dispatch(fetchTrending())
console.log(data); // Promise {<pending>}
return (
<Trending title={title}/>
)
}
export default TrendMovieContainer;
趋势电影.jsx
import React from 'react';
const TrendMovie = ({ title, id, img }) => {
return (
<div className="movieBox">
<h3>{title}</h3>
<img src={img} alt={id}/>
</div>
)
}
export default TrendMovie;
动作/index.js
import axios from 'axios';
const API_KEY = '224ce27b38a3805ecf6f6c36eb3ba9d0';
const BASE_URL = `https://api.themoviedb.org/3`
export const FETCH_TRENDING = 'FETCH_TRENDING';
export const fetchData = (data) => {
return {
type: FETCH_TRENDING,
data
}
}
export const fetchTrending = () => {
return (dispatch) => {
return axios.get(`${BASE_URL}/trending/all/week?api_key=${API_KEY}&language=en-US`)
.then(response => {
dispatch(fetchData(response.data))
})
.catch(error => {
throw(error);
});
}
}
减速器.js
import { FETCH_TRENDING } from '../actions/index';
export default function reducerTrending(state = [], action) {
switch (action.type) {
case FETCH_TRENDING:
return action.data;
default:
return state;
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import rootReducer from './reducers/index';
import { fetchTrending } from './actions/index';
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)));
console.log(store.dispatch(fetchTrending()));
ReactDOM.render(
<Provider store={store}><App /></Provider>,
document.getElementById('root'));
serviceWorker.unregister();
解决方案
您不必从操作中获取数据。您必须使用connect
函数或useSelector
钩子从减速器获取数据。如我所见,您正在尝试使用react-redux
库中的钩子而不是connect
函数。然后你需要将fetchTrending
action 的调度移动到useEffect
hook 并使用useSelector
hook 从 reducer 获取数据:
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
...
const TrendMovieContainer = (props) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchTrending());
}, []);
const data = useSelector(state => state.reducerTrending)
console.log(data);
...
}
推荐阅读
- javascript - 函数执行后没有设置 React props
- python - 熊猫数据框中相应行之间的日期差异
- vba - VBA 增量字符间距
- r - 从 igraph 中的图中删除选定的短路径
- ios - 缺少图标 - 如何添加 Xcode appicon 模板中不可用的图标?
- linux - CLI:确认问题的退出代码?1 或 0
- javascript - 从 javascript 与正在运行的 python 通信的正确方法
- c++ - 如何在 C++ 中创建一个可以返回静态或自动存储对象而无需复制的函数?
- azure-devops - 管道中的 VS 测试失败,缺少“Microsoft.NET.Test.Sdk”
- sql - 在同一个查询中查询每日汇总,然后每月汇总?