javascript - React-redux action is not defined - Stack Overflow

admin管理员组

文章数量:1319010

I'm trying to call an API with redux action but everytime I call it in my ponentDidMount 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

I'm trying to call an API with redux action but everytime I call it in my ponentDidMount 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 '../ponents/category';

class CategoryContainer extends Component{
  constructor(props){
    super(props);
    console.log('category props', this.props);
  }
  ponentDidMount(){
    console.log('masuk CDM');
    this.props.fetchCategory()
  }

  render(){
    var viewtypequery = window.innerWidth >= 1025 ? "puters" : "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..

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked May 16, 2017 at 7:37 Arga AdityaArga Aditya 19122 gold badges22 silver badges1313 bronze badges 2

• What is the exact error message? Which function is not defined? – Anthony Kong Commented May 16, 2017 at 7:52
• @AnthonyKong this is the error message: index.js:8181 Uncaught ReferenceError: getCategory is not defined at Object.fetchCategory (index.js:8181) at CategoryContainer.ponentDidMount (index.js:8154) at index.js:31883 at measureLifeCyclePerf (index.js:31693) at index.js:31882 at CallbackQueue.notifyAll (index.js:13487) at ReactReconcileTransaction.close (index.js:36788) at ReactReconcileTransaction.closeAll (index.js:7191) at ReactReconcileTransaction.perform (index.js:7138) at batchedMountComponentIntoNode (index.js:14399) – Arga Aditya Commented May 16, 2017 at 7:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I don't see you importing your getCategory action in your ponent. 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 ponentDidMount lifecycle method:

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

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 '../ponents/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);
  }
  ponentDidMount(){
    console.log('masuk CDM');
    this.props.getCategory(); // change here we call function from props binded to category ponent, this function is defined in your actions file
  }

  render(){
    var viewtypequery = window.innerWidth >= 1025 ? "puters" : "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 ponent
}

export default connect(mapStateToProps, mapDispatchToProps)(CategoryContainer)

Hopefully it helps.

本文标签： javascriptReactredux action is not definedStack Overflow