saga-action-creator
v1.1.9
Published
A toolkit to auto generate actions for the redux-saga.
Downloads
2,067
Readme
Saga action creator
The Saga-action-creator
is made to simplify the writing of Redux-saga
, it can auto-generate Action Creators
for dispatch from your writes Saga effects directly.
This toolkit supports plugins and It can help to make some actions before and after effect convenient, which means it will be much simpler to set up the loading state, handle the error, etc. when you executing the asynchronous effect.
Adds automated loading indicators for effects to Saga-action-creator
. Inspired by Rematch
.
Why we still need this toolkit when we have rematch
already? That is because the cost of migration from Redux's historical project to Rematch is high, and Redux-Saga has many excellent designs (i.e: such as take, fork, channel, etc.).
Features
- Auto-generate actions from passed effect
- Completely retain redux-saga features
- Support plugins
- Typescript-typings support (including plugins)
- Testable
Getting started
Install
$ npm install --save saga-action-creator
or
$ yarn add saga-action-creator
Usage Example
Step 1: Define saga effects
import createSagaActions from 'saga-action-creator';
import { takeLatest, call } from 'redux-saga/effects';
import { getUserInfo, updateUser } from '../services/user';
const user = createSagaActions({
// By default, you can pass the generator functions
*getUserById(id: string): Generator<any, any, any> {
yield call(getUserInfo, id);
},
// If you need to change the effect take type
// you can pass the object for the action name
updateUser: {
takeType: takeLatest,
*effect(id: string, name: string): Generator<any, any, any> {
yield call(updateUser, id, { name });
},
},
});
export default user;
Step 2: Connect sagaActions
import { createConnection, getLoadingPlugin } from 'saga-action-creator';
import user from './user';
import { takeLatest } from 'redux-saga/effects';
const creator = createConnection({
// Combine creators
creators: {
user,
},
// You can change the default take type here,
// by default is `takeEvery`
defaultTakeType: takeLatest,
// You can pass plugins at there
plugins: {
// the plugin name will be map to reducer key
loading: getLoadingPlugin(),
},
});
export default creator;
For a more advanced setup, see plugins and Redux-saga
Step 3: Connect to redux and redux-saga
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { all } from 'redux-saga/effects';
import createSagaMiddleware from 'redux-saga';
import creator from '../sagas';
// connect to store
const reducers = combineReducers({
...creator.getReducers(),
});
const sagaMiddleware = createSagaMiddleware();
// connect to saga and run
sagaMiddleware.run(function*() {
yield all(creator.getEffects());
});
const store = createStore(reducers, applyMiddleware(sagaMiddleware));
export type AppState = ReturnType<typeof reducers>;
export default store;
Step 3: Use created actions
import { connect } from 'react-redux';
import { AppState } from '../store';
import userActions from '../sagaActions/user';
import UserList from './UserList';
const mapStateToProps = (state: AppState) => ({
loading: state.loading.user.getUserById,
});
const mapDispatchToProps = {
getUserById: userActions.actions.getUserById,
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(UserList);
Examples
TODOs
- [x] Typescript generic types for plugins export reducer
- [x] Code remarks
- [x] Unit tests
- [x] Local example
- [ ] Plugin docs
- [ ] Online examples
- [ ] API docs
- [ ] Chinese docs
API
See the APIs
License
For a detailed explanation on how things work, checkout the rollup doc and parcel
Copyright (c) 2019-present, Idler.zhu