Lightweight front-end framework based on redux, async/await , immer and react-router. (Inspired by dva)
- Easy to learn, easy to use: only 6 apis, very friendly to redux users
- Vue concepts: organize models with
mutations,actionsandsubscriptions - Support mobile and react-native: cross platform
- Support load model and routes dynamically: Improve performance (Example)
- Plugin system: e.g. we have redva-loading plugin to handle loading state automatically
- Do Not Support HMR
- Do Not Support TypeScript
Because dva is fantastic and unbelievable, but I don't like generator function and immutable, so I instead of them by async/await and immer。
And Thanks dva very much,there are up to 90% code copy from dva, i just modify very few code.
There is three diffence between dva and redva
export default {
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
reducers:{
onBirthDay(state,action){
return {
...state,
age:state.age+1
}
}
}
}
onBrithDay,author.age add once,in dva, we must set it by reducer.
export default {
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
mutations:{
onBirthDay(state,action){
state.author.age += 1
}
}
}
in redva, mutations is much more simple and readable.
export default {
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
reducers:{
onBirthDay(state,action){
return {
...state,
age:state.age+1
}
}
},
effects:{
*waitNextBirthDay(state,{put,call}){
yield call(delay,60*60*24*365)
yield put.resolve({
type:'onBirthDay'
})
console.log('Happy BirthDay!');
}
}
}
in dva, we must learn how to use generator , put, call side effect , and select,put.resolve,take and so on...
export default {
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
mutations:{
onBirthDay(state,action){
state.author.age += 1
}
},
actions:{
async waitNextBirthDay(state,{dispatch,getState}){
await delay(60*60*24*365)
await dispatch({
type:'onBirthDay'
})
console.log('Happy BirthDay!');
}
}
}
in redva,we only learn how to use async/await and {dispatch,getState} in redux.that's all,no more complex concept.
const app = new dva({
onError: (error) => {
console.log(error.message);
}
});
app.model({
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
reducers:{
onBirthDay(state,action){
return {
...state,
age:state.age+1
}
}
},
effects:{
*doBirthDay(state,{put,call}){
throw new Error('oh my god!');
yield put.resolve({
type:'onBirthDay'
})
},
*waitNextBirthDay(state,{put,call}){
yield call(delay,100)
yield put.resolve({
type:'doBirthDay'
})
console.log('Happy BirthDay!');
}
}
})
app.start();
app._store.dispatch({
type: 'author/waitNextBirthDay',
})
onError is the key feature in dva,but it is not work well.the above example will triger twice onError
const app = new dva({
onError: (error) => {
error.preventDefault();
console.log(error.message);
}
});
if you add error.preventDefault,then the above example will triger right once onError, but also triger 'Happy BirthDay'
const app = new redva({
onError: (error) => {
error.preventDefault();
console.log(error.message);
}
});
app.model({
namespace:'author',
state:{
name:'fish',
sex:'man',
age:17,
},
mutations:{
onBirthDay(state,action){
state.author.age += 1
}
},
actions:{
async doBirthDay(state,{dispatch}){
throw new Error('oh my god!');
await dispatch({
type:'onBirthDay'
})
},
async waitNextBirthDay(state,{dispatch}){
await delay(100)
await dispatch({
type:'doBirthDay'
})
console.log('Happy BirthDay!');
}
}
})
app.start();
app._store.dispatch({
type: 'author/waitNextBirthDay',
})
the right behavior is only trigger once onError, and never trigger 'Happy BirthDay!',this is what redva do onError!
- Count: Simple count example
- Async: Simple async example
- Todo: Simple todo example
- Dynamic: Simple dynamic load component and model example
- AsyncLoading: Simple async and redva-loading middleware example
Yes! I refactor all dva unit test case to redva unit test case and they all pass.
No.
Some basic articles.
- The 8 Concepts, and know how they are connected together
- redva APIs
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent