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)

希望它有所帮助。

React-redux操作未定义

2 个答案: