从 componentDidMount 调度一个动作

Question

我必须在组件安装到 react 之后获取一些数据。我正在使用 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)

Answer 1

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

这里是一个例子：

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

....

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

在thunk docs 中了解更多信息。 另外我建议你刷新basics of redux。只是因为你有些困惑。命名和用法告诉我。