Skip to content

Commit

Permalink
example: add with rematch (umijs#449)
Browse files Browse the repository at this point in the history
cnyballk authored and sorrycc committed Jun 23, 2022
1 parent f602a77 commit 7b52b88
Showing 11 changed files with 145 additions and 15 deletions.
9 changes: 9 additions & 0 deletions examples/with-rematch/app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './rematch/store';

const RematchProvider = (props) => <Provider store={store} {...props} />;

export function rootContainer(container, opts) {
return React.createElement(RematchProvider, opts, container);
}
Binary file added examples/with-rematch/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions examples/with-rematch/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "@example/with-rematch",
"private": true,
"scripts": {
"build": "umi build",
"dev": "umi dev",
"start": "npm run dev"
},
"dependencies": {
"@rematch/core": "^2.2.0",
"react-redux": "^7.2.6",
"umi": "4.0.0-rc.5"
}
}
20 changes: 20 additions & 0 deletions examples/with-rematch/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { selectCount } from '../rematch/models/counter';
import '../style.less';
import { useAppDispatch, useAppSelector } from '../rematch/hook';

export default function HomePage(props) {
const count = useAppSelector(selectCount);
const dispatch = useAppDispatch();

return (
<div className="container">
<p className="title">UmiJS x Rematch</p>
<p className="display-count">{count}</p>
<div>
<button onClick={() => dispatch.counter.increment(1)}>+</button>
<button onClick={() => dispatch.counter.decrement(1)}>-</button>
</div>
</div>
);
}
3 changes: 3 additions & 0 deletions examples/with-rematch/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# with-rematch

An example of using [UmiJS](https://umijs.org/zh-CN) with [with-rematch](https://rematchjs.org/).
5 changes: 5 additions & 0 deletions examples/with-rematch/rematch/hook.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
16 changes: 16 additions & 0 deletions examples/with-rematch/rematch/models/counter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { createModel } from '@rematch/core';
import type { RootModel } from '.';
import type { RootState } from '../store';

export type CounterState = number;

export const counter = createModel<RootModel>()({
state: 0,
reducers: {
increment: (state, payload: number) => state + payload,
decrement: (state, payload: number) => state - payload,
},
effects: (dispatch) => ({}),
});

export const selectCount = (state: RootState) => state.counter;
8 changes: 8 additions & 0 deletions examples/with-rematch/rematch/models/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Models } from '@rematch/core';
import { counter } from './counter';

export interface RootModel extends Models<RootModel> {
counter: typeof counter;
}

export const models: RootModel = { counter };
10 changes: 10 additions & 0 deletions examples/with-rematch/rematch/store.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { init, RematchDispatch, RematchRootState } from '@rematch/core';
import { models, RootModel } from './models';

export const store = init({
models,
});

export type Store = typeof store;
export type AppDispatch = RematchDispatch<RootModel>;
export type RootState = RematchRootState<RootModel>;
41 changes: 41 additions & 0 deletions examples/with-rematch/style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lucida Sans', sans-serif;
margin: 0;
}

.title {
font-size: 64px;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

button {
background-color: #2eabff;
outline: none;
border: none;
color: white;
font-size: 24px;
padding: 16px;
width: 96px;
margin: 0 16px;
cursor: pointer;
transition: background-color 0.15s;
border-radius: 12px;
}

button:hover {
background-color: #79c4ff;
}

.display-count {
font-size: 36px;
}
34 changes: 19 additions & 15 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7b52b88

Please sign in to comment.