Redva NPM | npm.io

redva

Lightweight front-end framework based on redux, async/await , immer and react-router. (Inspired by dva)

Features

Easy to learn, easy to use: only 6 apis, very friendly to redux users
Vue concepts: organize models with mutations, actions and subscriptions
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

Attention

Do Not Support HMR
Do Not Support TypeScript

Why redva ?

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

mutations

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.

async action

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.

onError

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!