React-redux操作未定义

Question

I'm trying to call an API with redux action but everytime I call it in my componentDidMount function, it gives me an error stating that my function is not defined.. i'm so confused, I've been using my past redux project as reference and it's using the same method but it works.

Have a look at my codes

Reducer

 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 

Action

 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}); }) }} } 

Container

 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) 

I dont know if I miss something, It's been a while since I touch this project, been rewatching redux tutorial but I still couldn't find any solutions..

Answer 1

I don't see you importing your getCategory action in your component. I would generally write it like that:

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

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

and then use it directly in the componentDidMount lifecycle method:

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

Answer 2

Hi Arga try to use bindActionCreators from redux. Make changes in your code to

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)

Hopefully it helps.