@redux-model/react-native v6.9.2
Redux Model is created to enhance original redux framework, which has complex development flow and lots of template fragments.
Features
- Less code and higher efficiency
- Modify reducer by MVVM
- Absolutely 100% static type checking with typescript
- Trace loading status for each request action
- Support react hooks
Installation
Web
npm install @redux-model/web react-redux
React-Native
npm install @redux-model/react-native react-redux
Vue
npm install @redux-model/vue
Taro
npm install @redux-model/taro @tarojs/redux
Define Model
interface Response {
id: number;
name: string;
}
interface Data {
counter: number;
users: Partial<{
[key: string]: Response;
}>;
}
class TestModel extends Model<Data> {
increase = this.action((state) => {
state.counter += 1;
});
getUser = $api.action((id: number) => {
return this
.get<Response>(`/api/user/${id}`)
.onSuccess((state, action) => {
state.counter += 1;
state.users[id] = action.response;
});
});
protected initReducer(): Data {
return {
counter: 0,
users: {},
};
}
}
export const testModel = new TestModel();
With React Hooks
import React, { FC } from 'react';
const App: FC = () => {
const counter = testModel.useData((data) => data.counter);
const loading = testModel.getUser.useLoading();
const increase = () => {
testModel.increase();
testModel.getUser(3);
};
return (
<button onClick={increase}>
{loading ? 'Waiting...' : `You clicked ${counter} times`}
</button>
);
};
export default App;
With Redux connect
import React, { Component } from 'react';
import { connect } from 'react-redux';
type Props = ReturnType<typeof mapStateToProps>;
class App extends Component<Props> {
increase() {
testModel.increase();
testModel.getUser(3);
}
render() {
const { loading, counter } = this.props;
return (
<button onClick={this.increase}>
{loading ? 'Waiting...' : `You clicked ${counter} times`}
</button>
);
}
}
const mapStateToProps = () => {
return {
counter: testModel.data.counter,
loading: testModel.getUser.loading,
};
};
export default connect(mapStateToProps)(App);
With Vue
<template>
<button @click="increase">
{{loading ? 'Waiting...' : `You clicked ${counter} times`}}
</button>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
increase() {
testModel.increase();
testModel.getUser(3);
},
},
computed: {
counter() {
return testModel.data.counter;
},
loading() {
return testModel.getUser.loading;
},
},
};
</script>
Demos
Documents
Here is the document
Feel free to use it and welcome to send PR to me.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago