如何使用 api 通过使用 redux-thunk 的钩子传递的数据

Question

我是 redux 的初学者。正在使用 redux-thunk 和挂钩将 api 数据导入到控制台中，但数组数据不可用。

如果你能帮我弄清楚如何使用 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: 无法读取未定义的属性 'map'

Answer 1

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

希望对您有所帮助！！！

如何使用 api 通过使用 redux-thunk 的钩子传递的数据

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

api

reactjs

redux-thunk

react-hooks