问题:从 componentDidMount 调度一个动作

我必须在组件安装到 react.i 之后获取一些数据。我正在使用 componentDidMount 方法,在里面我想调度一个动作但是当我调用 popular() (见代码)它什么也不做,如果我做 dispatch (popular()) 它显示了 dispatch 和 popula 未定义的错误请注意我没有使用 mapDispatchtoProps。我能做些什么来获取数据?任何帮助,将不胜感激。

/action.js

export function popular(){
    return dispatch=>{
        return fetch(`https://api.themoviedb.org/3/movie/popular?api_key=<key>&language=en-US&page=1`)
                .then(data=>data.json())
                .then(data=>{
                        console.log("fetched",data);
                        dispatch({
                        type:"popular",
                        data:data.results,
                        page:data.page,
                        total_pages:data.total_pages,
                        total_results:data.total_results
                        })
     
                    })
    }
}

/App.js

import React from 'react';
import {Header} from './header.js';
import {Searchbar} from './searchbar.js';
import {Thumbnails}from './Thumbnails.js';
import {connect} from 'react-redux';
import {Select} from './select.js';
import { Pagination } from './pagination.js';
import {Filterbar} from './filterbar.js';
import { popular } from '../redux/action.js';

class App extends React.Component {
    componentDidMount(){
        console.log("heloo");
        popular();
           
        }

    render(){
        return (
            <>
                <Header /> 
                <Select {...this.props}/>
                <Filterbar/>
                <Searchbar {...this.props}/> 
                <Thumbnails {...this.props}/>
                <Pagination {...this.props}/>       
            </>
        );
    }
}

function mapStateToProps(state){
    return {
        state:state
    }
}

export default connect(mapStateToProps)(App)

解答

要调度popular动作,您需要提供redux-thunk中间件给 redux 并通过mapDispatchToProps传递popular动作。

这里有一个例子:

componentDidMount() {
  this.props.getPopular();           
}

....

function mapDispatchToProps(dispatch) {
 return { getPopular: () => dispatch(popular()) };
}

在thunk 文档中了解更多信息。另外我建议你刷新的 redux 基础知识。只是因为你有些困惑。命名和用法告诉我。