React-redux操作未定義

Question

我正在嘗試使用redux動作調用API，但每次我在componentDidMount函數中調用它時，它都會給出一個錯誤，指出我的函數沒有定義..我很困惑，我一直在使用我過去的redux項目作為參考，它使用相同的方法，但它的工作原理。

看看我的代碼

減速器

 import * as types from '../actions/actionconst'; const initialState = { isfetching: false, categories: [], error: null } const categoryReducer = (state = initialState, action) => { switch(action.type){ case types.FETCH_CATEGORIES: console.log('in fetch categories'); state = { ...state, isfetching: true, categories: action.payload } break; case types.FETCH_CATEGORIES_SUCCESS: state ={...state, categories: action.payload, isfetching: false} break; case types.FETCH_CATEGORIES_ERROR: state = {...state, isfetching: false, error: action.payload} } return state; } export default categoryReducer 

行動

 import * as types from './actionconst'; import categoryAPI from '../api/categoryAPI'; export function getCategory(){ return {dispatch => { fetch("http://localhost:8000/api/v1/categories") .then((response) => response.json()) .then((responseData) => { dispatch({ type: types.FETCH_CATEGORIES payload: responseData }) }) .catch((err) => { dispatch({type: types.FETCH_CATEGORIES_ERROR, payload: err}); }) }} } 

容器

 import React, {Component} from 'react'; import {connect} from 'react-redux'; import Category from '../components/category'; class CategoryContainer extends Component{ constructor(props){ super(props); console.log('category props', this.props); } componentDidMount(){ console.log('masuk CDM'); this.props.fetchCategory() } render(){ var viewtypequery = window.innerWidth >= 1025 ? "computers" : "mobile" return( <Category alphabets={this.state.alph} categorylist={this.state.categoriestemp} view={viewtypequery} active={this.state.isActive} /> ) } } const mapStateToProps = (state) => { console.log('state is', state); return{ categories: state.category } } const mapDispatchToProps = (dispatch) => { return{ fetchCategory: () => { console.log('cuk ta'); dispatch(getCategory()) } } } export default connect(mapStateToProps, mapDispatchToProps)(CategoryContainer) 

我不知道我是否遺漏了一些東西，自從我觸摸這個項目以來已經有一段時間了，我已經重新編寫了redux教程，但我仍然找不到任何解決方案..

Answer 1

我沒有看到您在組件中導入getCategory操作。 我通常會這樣寫：

import { getCategory } from '../path-to-action';
.......

export default connect(mapStateToProps, {getCategory})(CategoryContainer)

然后直接在componentDidMount生命周期方法中使用它：

  componentDidMount(){
    this.props.getCategory()
  }

Answer 2

嗨Arga嘗試使用redux的bindActionCreators。 在代碼中進行更改

import React, {Component} from 'react';
import {connect} from 'react-redux';

import Category from '../components/category';
import CategoryActions from '../actions/category'; // notice this will be your category actions file

class CategoryContainer extends Component{
  constructor(props){
    super(props);
    console.log('category props', this.props);
  }
  componentDidMount(){
    console.log('masuk CDM');
    this.props.getCategory(); // change here we call function from props binded to category component, this function is defined in your actions file
  }

  render(){
    var viewtypequery = window.innerWidth >= 1025 ? "computers" : "mobile"
    return(
      <Category alphabets={this.state.alph}
        categorylist={this.state.categoriestemp}
        view={viewtypequery}
        active={this.state.isActive}
      />
    )
  }

}

const mapStateToProps = (state) => {
  console.log('state is', state);
  return{
    categories: state.category
  }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(CategoryActions, dispatch) // notice change here we use bindActionCreators from redux to bind our actions to the component
}

export default connect(mapStateToProps, mapDispatchToProps)(CategoryContainer)

希望它有所幫助。