rematch is a nice framework for redux.
We provide pri-plugin-rematch
to use it more easy!
npm i pri-plugin-rematch
.
├── src
│ └── models
│ ├── application.ts # model file
│ └── user.ts # model file
└── priconfig.json
Let’s try it! For example, create a model named user
:
src/models/user.ts
import { model } from 'pri/model';
export default model({
state: {
name: 'jeck',
age: 25
},
reducers: {
increment: (state, count = 1) => {
return {
...state,
age: state.age + count
};
}
},
effects: {
async asyncIncrement() {
await new Promise(resolve => {
setTimeout(resolve, 1000);
});
this.increment(5);
}
}
});
Then, use it in pages!
src/pages/index.tsx
import { connect } from 'pri/models';
@connect(
state => {
return {
age: state.user.age
};
},
dispatch => {
return { increment: dispatch.user.increment, asyncIncrement: dispatch.user.asyncIncrement };
}
)
export default class Page extends React.PureComponent<Props, State> {
/**/
}
Import connect from 'pri/models' is a better way, 'pri/models' provides a strong typed
connect
function: