从 componentDidMount 调度一个动作

Question

我必须在组件安装后立即获取一些数据 react.i 我正在使用 componentDidMount 方法并且在其中我想分派一个动作但是当我调用 popular()（见代码）它什么都不做，如果我做 dispatch(popular()) 它显示错误，dispatch 和 popula not defined 请注意，我没有使用 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 提供 redux-thunk 中间件，并通过 mapDispatchToProps.

传递 popular 操作

举个例子：

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

....

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

在 thunk docs 中阅读更多相关信息。另外我建议你刷新basics of redux。只是因为你有些糊涂。命名和用法告诉我。

从 componentDidMount 调度一个动作

dispatching an action from componentDidMount

reactjs

redux

react-redux

action

reducers