如何获取redux action中包含的数据

Question

我正在使用 redux-thunk 调用 api。我想得到动作数据中包含的结果

如果我查看控制台并看到组件已调度 fetchTrending()，则返回 promise。

请帮助我如何获得结果

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 挂钩从reducer 获取数据。如我所见，您正在尝试使用来自 react-redux 库的钩子而不是 connect 函数。然后你需要将fetchTrending action 的调度移动到useEffect hook 并使用useSelector hook 从 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);

    ...
}