How to use api data passed through hooks using redux-thunk

Question

I'm a beginner of redux. Importing api data into the console using redux-thunk and hooks into the component, but arrayed data is not available.

I'd appreciate it if you could help me figure out how to extract the data with a ui.

ActionContainer.jsx

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchActionMovies } from '../store/actions/index';
import Movie from '../components/Movie';


const ActionContainer = (props) => {

    const dispatch = useDispatch();



    const actionData = useSelector(state => state.action);

    const [movies, setMovies] = useState(actionData);

    console.log(actionData);

    useEffect(() => {
        dispatch(fetchActionMovies());
    }, []);
    return (
        <div>
             { movies.map(movie => (
                <Movie img={movie.poster_path} key={movie.id}/>
            ))}

        </div>
    )
}

export default ActionContainer;

action/index.js

import axios from 'axios';

const API_KEY = '224ce27b38a3805ecf6f6c36eb3ba9d0';
const BASE_URL = `https://api.themoviedb.org/3`

export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES';

export const fetchActionData = (data) => {
  return {
      type: FETCH_ACTION_MOVIES,
      data
  }
}

export const fetchActionMovies = () => {
  return (dispatch) => {
    return axios.get(`${BASE_URL}/discover/movie?api_key=${API_KEY}&with_genres=28`)
      .then(response => {
        dispatch(fetchActionData(response.data))
      })
      .catch(error => {
        throw(error);
      })
  }
}

reducerAction.js

import { FETCH_ACTION_MOVIES } from '../actions/index';

export default function (state = [], action) {
  switch (action.type) {
      case FETCH_ACTION_MOVIES:
          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 './store/reducers';
import './static/sass/style.scss';

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)));

ReactDOM.render(
    <Provider store={store}><App /></Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

console.log(actionData) => (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

TypeError: Cannot read property 'map' of undefined

tarzen chugh · Accepted Answer · 2019-09-06 07:06:13Z

4

actionContainer.js

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch, useStore } from 'react-redux';
import { fetchActionMovies } from '../actions/index'; // change path of action
import Movie from '../components/Movie';

const ActionContainer = (props) => {
    const dispatch = useDispatch();
    const actionData = useSelector(state => state.app.movies, []) || []; // you could use memoization to improve performance.

    useEffect(() => {
        dispatch(fetchActionMovies());
    }, []);
    return (
        <div>
            { actionData.results && actionData.results.map(movie => (
                <Movie img={movie.poster_path} />
            ))}
        </div>
    )
}

reducer/index.js

import { FETCH_ACTION_MOVIES } from '../actions/index';

export default function (state = [], action) {
  switch (action.type) {
      case FETCH_ACTION_MOVIES: // you should not mutate state
          return {
            ...state,
            movies: action.data,
        };
      default:
          return state;
  }
}

Hope that helps!!!

edited Sep 6, 2019 at 7:06

answered Sep 6, 2019 at 5:10

tarzen chugh

11.4k4 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

smooth97 Over a year ago

Thank you for your answer. But it's not working. If I look up actionData[0] on the console, TypeError: Cannot read property '0' of undefined error appears

smooth97 Over a year ago

Thank you for your helpful answers. Thanks to you, it's been solved and I've learned a lot!!

John Valdetine Over a year ago

@tarzenchugh Hi, are you sure this useSelector usage for memoization? It doesn't work. When I press a button in a page ( Calling data with useSelector in the same page), useSelector works unnecessarily. What is the best usage of useSelector for memoization?

Collectives™ on Stack Overflow

How to use api data passed through hooks using redux-thunk

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related