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("") .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..

2

2 Answers

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

4

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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy