How to get the data contained in the redux action - reactjs

Question

I'm calling api using redux-thunk. I would like to get the results contained in the action data
if I look at the console and see that the component has dispatched fetchTrending(), the promise is returned.
please help me how to get the results
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;
TrendMovie.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;
action/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);
});
}
}
reducer.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();
my store

Answer 1

You don't have to get data from the action. You have to get data from the reducer by using connect function or useSelector hook. As I see, you are trying to use hooks from react-redux library instead of connect function. Then you need to move the dispatching of fetchTrending action to useEffect hook and use useSelector hook to get data from the 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);
...
}