Связывание нескольких саг для разных типов действий - PullRequest
Новая
       34

Связывание нескольких саг для разных типов действий

0 голосов
/ 09 октября 2019

У меня есть одна сага, чтобы захватить несколько категорий действий (Get и Post). Saga ловит действия без каких-либо проблем, но не ловит действия категорий сообщений.

Я использую шаблон React-Bolier-plate

Вот код для саги 

import axios from 'axios';
import {
  call,
  put,
  takeLatest,
  all,
  takeEvery
} from 'redux-saga/effects';

import {
  GET_CATEGORIES,
  CREATE_CATEGORY
} from '../constants';

export function* doGetCategories() {
  console.log('Getting categories from api'); // I getting this when component is mounted
}

export function* doCreateCategory() {
  console.log('Posting Category to the api') // This function is not getting catured
}

export default function* categoriesSaga() {

  // Tried this as well
  // yield [
  //   takeLatest(GET_CATEGORIES, doGetCategories),
  //   takeLatest(CREATE_CATEGORY, doCreateCategory),
  // ]; 
  yield all([
    takeEvery(GET_CATEGORIES, doGetCategories),
    takeEvery(CREATE_CATEGORY, doCreateCategory)
  ]);
}
Вот мой код для компонента, куда я отправляю действия 

import reducer from './reducer';
import saga from './saga';



import {
  getCategories,
  createCategory
} from './actions';

class CategoryTable extends React.Component {
  constructor(props) {
    super(props);

    this.handleCreateCategory = this.handleCreateCategory.bind(this);
  }

  componentDidMount() {
    this.props.onComponentMount();
    // Get categories action is triggers and saga is capturing it
  }

  handleCreateCategory() {
    this.props.handleCategoryPost();
    // Create category action is triggered but saga is not getting called
  }

  render() {
    return (

      // passing handleCreateCategory function to other component as props
      <
      Link to = {
        {
          pathname: '/categories/new',
          categories: this.props.categories.items,
          handleCreateCategory: this.handleCreateCategory,
        }
      } >
      Add Category <
      /Link>
    );
  }
}

const mapStateToProps = createStructuredSelector({
  categories: SelectCategories(),
  isLoading: SelectIsLoading(),
  errors: SelectErrors(),
});



function mapDispatchToProps(dispatch) {
  return {
    onComponentMount: () => {
      dispatch(getCategories())
    },
    handleCategoryPost: () => {
      dispatch(createCategory())
    },
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps
);

const withReducer = injectReducer({
  key: 'CategoryTable',
  reducer
});
const withSaga = injectSaga({
  key: 'CategoryTable',
  saga
});

export default compose(
  withReducer,
  withSaga,
  withConnect
)(CategoryTable);
Вот код моих действий 

import {
  DEFAULT_ACTION,
  GET_CATEGORIES,
  GET_CATEGORIES_SUCCESS,
  GET_CATEGORIES_ERROR,
  CREATE_CATEGORY,
  CREATE_CATEGORY_SUCCESS,
  CREATE_CATEGORY_ERROR,
} from '../constants';


export function getCategories() {
  return {
    type: GET_CATEGORIES,
  };
}


// create Category
export function createCategory() {
  console.log('Came up to here'); // This is getting triggered but not the saga for this action
  return {
    type: CREATE_CATEGORY,
    payload: 'mydata',
  };
}
Изучил статьи о том, как вызывать несколько саг, и попробовал описанные выше методы.

Кажется, мне не хватает некоторой информации в следующем коде.

...