我一直在尝试使用redux和redux-saga创建一个React应用，但是我一直无法使它工作，因此我总是得到undefined的值。

这是我的组件catalogs/index.js：

import React,{Component} from 'react';
import {connect} from 'react-redux';
import CatalogHeader from './CatalogHeader';
import CircularProgress from '@material-ui/core/CircularProgress';
import {getcatalogs} from 'actions/Catalogs';
import IntlMessages from 'util/IntlMessages';
import CustomScrollbars from 'util/CustomScrollbars';


class Catalogs extends Component {

  constructor() {
    super();
    this.state = {
      anchorEl: null
    }
  }

  updateSearch = (evt) => {
    this.props.updateSearch(evt.target.value);
    this.onSearchTodo(evt.target.value)
  };

  render() {
    const {catalogsList} = this.props;

    return (
      <div classname="app-wrapper">
        <div classname="animated slideInUpTiny animation-duration-3">
          <div classname="app-module">
            <div classname="module-box">
              <div classname="module-box-header">
                <CatalogHeader catalogsList={catalogsList}
                                placeholder="Buscar" user={this.props.user}
                                onChange={this.updateSearch.bind(this)}
                                value={this.props.searchTodo}/>
              </div>

            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapstatetoProps = ({catalogs,settings}) => {
  const {width} = settings;
  const {catalogsList} = catalogs;
  return {
    width,catalogsList,}
};

export default connect(mapstatetoProps,{
  getcatalogs,})(Catalogs);

这是另一个组件catalogs/CatalogHeader.js

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import {Dropdown,Dropdownmenu,DropdownToggle,Popover} from 'reactstrap';
import SearchBox from 'components/SearchBox';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import Select from '@material-ui/core/Select';

class CatalogHeader extends React.Component {

  handleChange = name => event => {
    this.setState({[name]: event.target.value});
  };

  onSearchBoxSelect = () => {
    this.setState({
      searchBox: !this.state.searchBox
    })
  };

  constructor() {
    super();
    this.state = {
      anchorEl: undefined,searchBox: false,popoverOpen: false
    };
    this.toggle = this.toggle.bind(this);

  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  printCatalogs(catalogs) {
    console.log(catalogs);
  }

  render() {
    const {catalogs} = this.props;

    return (
      <div classname="module-box-header-inner catalogs-header">
        <div classname="col-5 catalogs-header">
          <FormControl classname="w-100 mb-2">
            {this.printCatalogs(this.props.catalogs)}
            <InputLabel htmlFor="age-simple">Seleccione Catálogo</InputLabel>
            <Select
              value={this.state.age}
              onChange={this.handleChange('age')}
              input={<Input id="ageSimple1"/>}>
              {catalogs.map(catalog =>
                <MenuItem key={catalog}>
                  {catalog}
                </MenuItem>,)}

              <MenuItem value="">
                <em>None</em>
              </MenuItem>
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
        <div classname="module-box-header-right col-7 catalogs-header">
          <div classname="search-bar right-side-icon bg-transparent d-none d-sm-block col-6">
            <div classname="form-group">
              <input classname="form-control border-0" type="search" placeholder="Buscar"/>
              <button classname="search-icon"><i classname="zmdi zmdi-search zmdi-hc-lg"/></button>
            </div>
          </div>
          <div classname="col-6">
            <div classname="catalogs-header catalogs-header-buttons">
              <Button variant="contained" classname="jr-btn bg-white">
                <i classname="zmdi zmdi-filter-list zmdi-hc-fw"/>
                <span>Filtrar</span>
              </Button>
              <Button variant="contained" classname="jr-btn bg-white">
                <i classname="zmdi zmdi-sort zmdi-hc-fw"/>
                <span>Ordenar</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CatalogHeader;

这是我的操作文件：

import {
  GET_CATALOGS,GET_CATALOGS_SUCCESS,SHOW_MESSAGE
 } from 'constants/actionTypes';

export const getcatalogs = (group) => {
  return {
    type: GET_CATALOGS,payload: group
  };
};

export const getcatalogsSuccess = (catalogs) => {
  return {
    type: GET_CATALOGS_SUCCESS,payload: catalogs
  }
};

export const showCatalogsMessage = (message) => {
  return {
    type: SHOW_MESSAGE,payload: message
  };
};

这是我的减速器文件：

import {
  GET_CATALOGS,SHOW_MESSAGE,HIDE_MESSAGE,GET_CATALOGS_SUCCESS
} from 'constants/actionTypes';

const INIT_STATE = {
  loader: false,alertMessage: '',showMessage: false,catalogsList: null
};

export default (state=INIT_STATE,action) => {
  switch (action.type) {
    case GET_CATALOGS_SUCCESS: {
      return {
        ...state,loader: false,catalogsList: action.payload
      }
    }
    case SHOW_MESSAGE: {
      return {
        ...state,alertMessage: action.payload,showMessage: true,loader: false
      }
    }
    case HIDE_MESSAGE: {
      return {
        ...state,loader: false
      }
    }
    default:
      return state;
  }
}

这是我的sagas文件：

import {all,call,fork,put,takeEvery} from "redux-saga/effects";
import {catalogs} from 'backend/Catalogs';
import {GET_CATALOGS} from "constants/actionTypes";
import {getcatalogs,getcatalogsSuccess,showCatalogsMessage} from 'actions/Catalogs';

const getcatalogsRequest = async (group) => {
  await catalogs.getcatalogs(group)
    .then(catalogsList => catalogsList)
    .catch(error => error);
  }

function* getcatalogsListFromRequest({payload}) {
  const {group} = payload;
  try {
    const catalogsList = yield call(getcatalogsRequest,group);
    if (catalogsList.message) {
      yield put(showCatalogsMessage(catalogsList.Message));
    } else {
      yield put(getcatalogsSuccess(catalogsList.catalogsList))
    }
  } catch (error) {
    yield put(showCatalogsMessage(error));
  }
}

export function* getcatalogsList() {
  yield takeEvery(GET_CATALOGS,getcatalogsListFromRequest);
}

export default function* rootSaga() {
  yield all([
    fork(getcatalogsList)
  ]);
}

这是通过Axios执行ajax请求的文件（我确定永远不会到达此代码，也永远不会执行对后端服务器的请求）：

import axios from 'axios';
import {backendServer} from './constants';

const getcatalogsEndpoint = backendServer + 'api/util/catalogs/';

const getcatalogs = (group) => {
  console.log('here inside getcatalogs in backend/Catalogs');
  return axios.get(getcatalogsEndpoint+(group=null)?null:'?group='+group)
  .then(Response => {
    return {catalogsList: Response.data}
  })
  .catch(Error => Error);
};

export const catalogs = {
  getcatalogs: getcatalogs
}

在CatalogsHeader.js中出现问题，因为this.props.catalogsList的值始终为undefined：