The ez-saga project is a project that imitates dva-js
npm install ez-sagaThe ez-saga project is a project that imitates dva-js
ez-saga is designed to simplify Redux + Saga development, offering a modern, developer-friendly experience similar to dva but with significant improvements:
createApp, regist) | High | Low (High boilerplate) |
yield take watchers. Just write functions.
npm install ez-saga --save
`
This is the entry file of the project.
`js
import 'core-js';
import 'react';
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import ezSaga from 'ez-saga';
import Views from './views';
let app = ezSaga.createApp();
window.app = app;
class RouterConfig extends React.Component {
render() {
return (
);
}
}
ReactDom.render(
`
Now let's define a model 'userModel.js'
`js
export const modelName = 'user';
const model = {
/* model name /
name: modelName,
/* default state/
state: {
userDetial: null
},
reducers: {
/* save user reducer /
saveUser: (state, action) => {
let newStat = {
...state
};
newStat.userDetial = action.payload.userDetial;
return newStat;
}
},
effects: {
/* getUserDetial effect /
* getUserDetial({ payload }, { call, put, select }) {
//let user = payload;
let user = {
id: '1',
name: 'tom'
};
//async method call
//yield call('async', agr1, agr2, arg3, ....);
//save user
yield put({
type: ${modelName}/saveUser,
payload: {
user: user
}
});
},
/* deleteUserDetial effect /
*deleteUserDetial({ payload }, { call, put, select }) {
let id = payload;
//The saveState effect is built-in by default.
yield put({
type: ${modelName}/saveState,
payload: {
userDetial: null
}
});
}
}
};
export default model;
`
Now we can register this model.
`js
import userModel from './userModel';
window.app.regist(userModel);
`
Next, we define a page.
`js
import React from 'react';
import { modelName } from './userModel';
import { connect } from 'react-redux';
class View extends React.Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete() {
this.props.dispatch({
type: ${modelName}/deleteUserDetial, payload: {}
});
}
componentDidMount() {
this.props.dispatch({ type: ${modelName}/getUserDetial, payload: { id: 1 } });
}
render() {
return (
userDetail:{JSON.stringify(this.props.userDetail)}
);
}
}
function stateMapProps(state, props) {
let model = state[modelName];
return {
userDetail: model.userDetail
};
}
export default connect(stateMapProps)(View);
`
We can invoke reducers and effects using dispatch, and we can obtain the results returned by effects.
Vite Plugin for HMR
ez-saga provides a built-in Vite plugin to support Hot Module Replacement (HMR) for models. This allows you to modify effects and reducers during development without reloading the page.
Usage
1. Import the plugin in your vite.config.ts:
`typescript
import { defineConfig } from 'vite';
import ezSagaHmr from 'ez-saga/vite';
export default defineConfig({
plugins: [
ezSagaHmr(), // Add ez-saga HMR plugin
// other plugins...
]
});
`
2. That's it!
The plugin automatically detects your model files and injects hot update logic. When you modify a model file, ez-saga will:
- Cancel old saga tasks.
- Re-register the model reducers (hot-swap logic).
- Restart the effects.
Note: This requires your model files to be exported using export default and contain a name property.
Webpack Plugin for HMR
For Webpack 5 users, ez-saga also provides a compatible HMR plugin.
Usage
1. Import the plugin in your webpack.config.js:
`javascript
const EzSagaWebpackPlugin = require('ez-saga/webpack').default; // Notice the .default for CJS
module.exports = {
// ...
plugins: [
new EzSagaWebpackPlugin(),
// other plugins...
]
};
``