У меня есть одна сага, чтобы захватить несколько категорий действий (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',
};
}
Изучил статьи о том, как вызывать несколько саг, и попробовал описанные выше методы.
Кажется, мне не хватает некоторой информации в следующем коде.