From 158b217ec5f167b3356dff2f61d92d74f0b14216 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 23 Mar 2021 15:49:05 +0800 Subject: [PATCH] chore(rematch-tsx): update rematch. --- example/rematch-tsx/src/models/index.tsx | 2 +- example/rematch-tsx/src/models/login.ts | 3 + example/rematch-tsx/src/pages/home/index.tsx | 4 +- example/rematch-tsx/src/pages/login/index.tsx | 34 +++--- example/rematch-tsx/src/routes/Controller.tsx | 113 +++++++++++------- 5 files changed, 91 insertions(+), 65 deletions(-) diff --git a/example/rematch-tsx/src/models/index.tsx b/example/rematch-tsx/src/models/index.tsx index b0ee806e..88337130 100644 --- a/example/rematch-tsx/src/models/index.tsx +++ b/example/rematch-tsx/src/models/index.tsx @@ -10,7 +10,7 @@ export interface RootModel extends Models, FullModel { type FullModel = ExtraModelsFromLoading; -export const models = { global } as RootModel; +export const models = { global, login } as RootModel; export const store = init({ models, plugins: [loadingPlugin()], diff --git a/example/rematch-tsx/src/models/login.ts b/example/rematch-tsx/src/models/login.ts index 2bcbc138..9c3c2949 100644 --- a/example/rematch-tsx/src/models/login.ts +++ b/example/rematch-tsx/src/models/login.ts @@ -21,6 +21,9 @@ export default createModel()({ updateState: (state, payload: LoginState): LoginState => ({ ...state, ...payload }), }, effects: (dispatch) => ({ + async logout(_) { + // await logout(); + }, async submit(payload: LoginState['userData']) { await login({ ...payload } as LoginState['userData']); history.push('/'); diff --git a/example/rematch-tsx/src/pages/home/index.tsx b/example/rematch-tsx/src/pages/home/index.tsx index 59153545..7742a7b7 100644 --- a/example/rematch-tsx/src/pages/home/index.tsx +++ b/example/rematch-tsx/src/pages/home/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button } from 'uiw'; import { DefaultProps } from '../../'; -function Home(props: DefaultProps) { +export default function Home(props: DefaultProps) { const { history } = props || {}; return (
@@ -11,5 +11,3 @@ function Home(props: DefaultProps) {
); } - -export default Home; diff --git a/example/rematch-tsx/src/pages/login/index.tsx b/example/rematch-tsx/src/pages/login/index.tsx index 3783ddeb..f34d0ddb 100644 --- a/example/rematch-tsx/src/pages/login/index.tsx +++ b/example/rematch-tsx/src/pages/login/index.tsx @@ -1,26 +1,28 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Form, Row, Col, Button, Input, Checkbox } from 'uiw'; -import { connect } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import logo from '../../assets/logo-dark.svg'; import styles from './index.module.less'; import { RootState, Dispatch } from '../../models'; import { DefaultProps } from '../../'; -const mapState = ({ login, loading }: RootState) => ({ - loading: loading.effects.login.submit, - account: login.userData, -}); +type Props = DefaultProps; -const mapDispatch: any = (dispatch: Dispatch) => ({ - submit: dispatch.login.submit, -}); +export default function Login(props: Props) { + const { loading, token } = useSelector(({ loading, login }: RootState) => ({ + loading: loading.effects.login.submit, + account: login.userData, + token: login.token, + })); -type StateProps = ReturnType; -type DispatchProps = ReturnType; -type Props = StateProps & DispatchProps & DefaultProps; + const dispatch = useDispatch(); + useEffect(() => { + if (token) { + dispatch.login.logout(); + } + // eslint-disable-next-line + }, []); -function Login(props: Props) { - const { loading } = props; return ( @@ -38,7 +40,7 @@ function Login(props: Props) { err.filed = errorObj; throw err; } - props.submit({ + dispatch.login.submit({ username: current.username, password: current.password, terms: current.terms, @@ -109,5 +111,3 @@ function Login(props: Props) { ); } - -export default connect(mapState, mapDispatch)(Login); diff --git a/example/rematch-tsx/src/routes/Controller.tsx b/example/rematch-tsx/src/routes/Controller.tsx index 7d44a742..efd72301 100644 --- a/example/rematch-tsx/src/routes/Controller.tsx +++ b/example/rematch-tsx/src/routes/Controller.tsx @@ -1,51 +1,76 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Switch, Route } from 'react-router-dom'; -import { connect } from 'react-redux'; -import { Dispatch, RootState } from '../models'; +import { useDispatch } from 'react-redux'; +import { Dispatch } from '../models'; import { getRouterData } from '../routes/router'; +import { DefaultProps } from '../'; -type StateProps = ReturnType; -type DispatchProps = ReturnType; -type Props = StateProps & - DispatchProps & { - routerData: typeof getRouterData; - }; +type Props = { + routerData: typeof getRouterData; +} & DefaultProps; -const mapState = ({ global }: RootState) => ({ - // token: global.token, - // userData: global.userData, -}); +export default function Controller(props: Props) { + const { routerData } = props || {}; + const dispatch = useDispatch(); + // const token = useSelector(({ global }: RootState) => global.token) + const BasicLayout: any = routerData['/'].component; + const UserLayout: any = routerData['/login'].component; + useEffect(() => { + if (!/^(\/login)/.test(window.location.pathname)) { + dispatch.global.verify(); + } + // eslint-disable-next-line + }, []); + return ( + + } /> + } /> + + ); +} -const mapDispatch: any = (dispatch: Dispatch) => ({ - // verify: dispatch.global.verify, - // verify: global.verify, -}); +// type StateProps = ReturnType; +// type DispatchProps = ReturnType; +// type Props = StateProps & +// DispatchProps & { +// routerData: typeof getRouterData; +// }; -class Controller extends React.PureComponent { - componentDidMount() { - // this.props.verify(); - } - render() { - const { routerData } = this.props; - // console.log('this.props:', this.props) - const BasicLayout = routerData['/'].component; - const UserLayout = routerData['/login'].component; - // isAuthenticated = true 表示身份经过验证 - // 请求是否登录验证 - // if (!this.props.isAuthenticated) { - // return ( - // 是否登录的验证 - // ); - // } - // resetProps.token = token; - // resetProps.userData = userData; - return ( - - } /> - } /> - - ); - } -} +// const mapState = ({ global }: RootState) => ({ +// // token: global.token, +// // userData: global.userData, +// }); + +// const mapDispatch: any = (dispatch: Dispatch) => ({ +// // verify: dispatch.global.verify, +// // verify: global.verify, +// }); + +// class Controller extends React.PureComponent { +// componentDidMount() { +// // this.props.verify(); +// } +// render() { +// const { routerData } = this.props; +// // console.log('this.props:', this.props) +// const BasicLayout = routerData['/'].component; +// const UserLayout = routerData['/login'].component; +// // isAuthenticated = true 表示身份经过验证 +// // 请求是否登录验证 +// // if (!this.props.isAuthenticated) { +// // return ( +// // 是否登录的验证 +// // ); +// // } +// // resetProps.token = token; +// // resetProps.userData = userData; +// return ( +// +// } /> +// } /> +// +// ); +// } +// } -export default connect(mapState, mapDispatch)(Controller); +// export default connect(mapState, mapDispatch)(Controller);