CODEWITHSUNDEEP
reactjsreact-reduxredux-thunk
smooth97
smooth97

Reputation: 91

How to get the data contained in the redux action

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 enter image description here

Upvotes: 1

Views: 543

Answers (1)

Andrii Golubenko
Andrii Golubenko

Reputation: 5179

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

    ...
}

Upvotes: 1

Related Questions