Question

我正在使用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;

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

我的商店

Answer 1

您不必从操作中获取数据。您必须使用connect函数或useSelector挂钩从减速器中获取数据。如我所见，您正在尝试使用react-redux库中的挂钩而不是connect函数。然后，您需要将fetchTrending动作的调度移到useEffect钩子上，并使用useSelector钩子从化简器中获取数据：

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

    ...
}

如何获取redux操作中包含的数据

1 个答案: