반응 redux에서 .dispatch를 사용하는 방법?

Question

나는 한 다음

CatsPage.js :

import React from 'react'; 
import PropTypes from 'prop-types'; 
import {connect} from 'react-redux'; 
//import * as catActions from '../../actions/catActions'; 
import CatList from './CatList'; 
import {loadCats} from '../../actions/catActions'; 

class CatsPage extends React.Component { 
    componentDidMount() { 
    this.props.dispatch(loadCats()) 
    } 
    render() { 
    return (
     <div> 
     <h1>Cats</h1> 
     <div> 
      <CatList cats={this.props.cats} /> 
     </div> 
     </div> 
    ); 
    } 
} 

CatsPage.propTypes = { 
    cats: PropTypes.array.isRequired 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
    cats: state.cats 
    }; 
} 

export default connect(mapStateToProps)(CatsPage); 

catActions.js

import * as types from './actionTypes'; 
import catApi from '../api/CatsApi'; 

export function loadCats() { 
    return function(dispatch) { 
    return catApi.getAllCats().then(cats => { 
     dispatch(loadCatsSuccess(cats)); 
    }).catch(error => { 
     throw(error); 
    }); 
    }; 
} 

export function loadCatsSuccess(cats) { 
    return {type: types.LOAD_CATS_SUCCESS, cats}; 
} 

나는 다음과 같은 오류 받고 있어요 : Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. at dispatch (createStore.js:166)

I을 신참이야. 즉, React + Redux를 사용하는 법을 배우십시오. 파견 작업과 loadCats()를 만들기 위해 내가 수정해야 할 부분이 무엇이겠습니까?

감사합니다.

Answer 1

상점을 제대로 설치/구성하지 않았을 가능성이 있습니다. 다음과 같이 표시되어야합니다.

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers/index'; 

// Note: this API requires redux@>=3.1.0 
const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
);