Skip to content

Commit 63d154e

Browse files
ChenlingasMxChenlingasMx
authored
deps: 增加react-query请求 (#230)
* chore: update react-native0.69.3 to react-native0.70.5 * doc: update README * fix: 修复android运行报错 * released v5.0.0 * chore: update react-native0.70.5 to react-native0.70.6 * chore: 升级ios/android配置 * released v5.1.0 * fix(deps): 增加react-query请求
1 parent 302569f commit 63d154e

File tree

18 files changed

+496
-500
lines changed

18 files changed

+496
-500
lines changed

‎HelloWorld/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"react-native-screens": "~3.15.0",
3232
"react-native-svg": "12.1.1",
3333
"react-redux": "7.2.6",
34-
"redux": "4.1.2"
34+
"redux": "4.1.2",
35+
"react-query":"~3.39.2"
3536
},
3637
"devDependencies": {
3738
"@babel/core": "~7.18.9",

‎HelloWorld/src/App.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
11
import 'react-native-gesture-handler';
22
import React from 'react';
3-
import {StatusBar} from 'react-native';
4-
import {NavigationContainer} from '@react-navigation/native';
5-
import {createStackNavigator} from '@react-navigation/stack';
6-
import {Provider} from 'react-redux';
7-
import {store} from './models';
3+
import { StatusBar } from 'react-native';
4+
import { NavigationContainer } from '@react-navigation/native';
5+
import { createStackNavigator } from '@react-navigation/stack';
6+
import { Provider } from 'react-redux';
7+
import { store } from './models';
88
import AuthLoadingScreen from './pages/AuthLoading';
9-
import {stackPageData} from './routes';
9+
import { stackPageData } from './routes';
10+
import { QueryClient, QueryClientProvider } from 'react-query'
1011

1112
const Stack = createStackNavigator();
13+
const queryClient = new QueryClient()
1214

1315
export default () => {
1416
return (
1517
<Provider store={store}>
16-
<StatusBar barStyle="light-content" />
17-
<AuthLoadingScreen>
18-
{token => (
19-
<NavigationContainer>
20-
<Stack.Navigator initialRouteName={token ? 'Home' : 'SignIn'}>
21-
{stackPageData.map((props, index) => {
22-
return (
23-
<Stack.Screen
24-
key={index}
25-
{...props}
18+
<QueryClientProvider client={queryClient}>
19+
<StatusBar barStyle="light-content" />
20+
<AuthLoadingScreen>
21+
{token => (
22+
<NavigationContainer>
23+
<Stack.Navigator initialRouteName={token ? 'Home' : 'SignIn'}>
24+
{stackPageData.map((props, index) => {
25+
return (
26+
<Stack.Screen
27+
key={index}
28+
{...props}
2629
// name="Home"
2730
// options={{
2831
// header: () => null
2932
// }}
3033
// component={Home}
31-
/>
32-
);
33-
})}
34-
</Stack.Navigator>
35-
</NavigationContainer>
36-
)}
37-
</AuthLoadingScreen>
34+
/>
35+
);
36+
})}
37+
</Stack.Navigator>
38+
</NavigationContainer>
39+
)}
40+
</AuthLoadingScreen>
41+
</QueryClientProvider>
3842
</Provider>
3943
);
4044
};

‎HelloWorld/src/hooks/users.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Alert } from 'react-native';
2+
import AsyncStorage from '@react-native-async-storage/async-storage';
3+
import { userLogin, userAuth } from '../services/users';
4+
import { useQuery, useMutation } from 'react-query'
5+
import Global from '../global';
6+
7+
// 登录
8+
export const login = ({ config = {}, update, formData, remember }) => {
9+
const mutation = useMutation({
10+
mutationFn: userLogin,
11+
onSuccess: async (data) => {
12+
if (data?.token && data?.data) {
13+
await AsyncStorage.setItem('token', data.token);
14+
if (remember) {
15+
await AsyncStorage.setItem('cachLoginName', formData.loginName);
16+
await AsyncStorage.setItem('cachPassword', formData.password);
17+
}
18+
await AsyncStorage.setItem('userData', JSON.stringify(data.data));
19+
update({ token: data.token, userData: data.data });
20+
if (Global.navigation) {
21+
Global.navigation.replace('Home');
22+
}
23+
} else if (data && data.message) {
24+
Alert.alert(`Login failed - ${data.error}`, data.message);
25+
}
26+
},
27+
...config
28+
})
29+
return mutation
30+
}
31+
32+
// 验证token
33+
export const authToken = ({ token, update }) => {
34+
const mutation = useMutation({
35+
mutationFn: userAuth,
36+
onMutate: async () => {
37+
let host = await AsyncStorage.getItem('apihost');
38+
if (!host && conf.hosts[0]) {
39+
await AsyncStorage.setItem('apihost', JSON.stringify(conf.hosts[0]));
40+
await update({ apihost: conf.hosts[0] });
41+
}
42+
if (!token) {
43+
await AsyncStorage.removeItem('userData');
44+
await AsyncStorage.removeItem('token');
45+
}
46+
},
47+
onSuccess: async (data) => {
48+
if (data?.token) {
49+
await update({ authState: true, token: data.token });
50+
} else {
51+
await update({ authState: true, token: null });
52+
}
53+
}
54+
})
55+
return mutation
56+
}
57+
58+
// 退出
59+
export const logout = ({ update }) => {
60+
AsyncStorage.removeItem('token');
61+
AsyncStorage.removeItem('userData');
62+
update({ token: null, userData: null });
63+
if (Global.navigation) {
64+
Global.navigation.navigate?.('SignIn');
65+
}
66+
}
67+

‎HelloWorld/src/models/global.js‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import AsyncStorage from '@react-native-async-storage/async-storage';
2-
import {userAuth} from '../services/users';
2+
import { userAuth } from '../services/users';
33
import conf from '../config';
44

55
export default {
@@ -10,29 +10,10 @@ export default {
1010
authState: false,
1111
token: null,
1212
apihost: null,
13+
userData: null,
1314
},
1415
reducers: {
15-
update: (state, payload) => ({...state, ...payload}),
16+
update: (state, payload) => ({ ...state, ...payload }),
1617
},
17-
effects: dispatch => ({
18-
async authToken(_, {global}) {
19-
let host = await AsyncStorage.getItem('apihost');
20-
if (!host && conf.hosts[0]) {
21-
await AsyncStorage.setItem('apihost', JSON.stringify(conf.hosts[0]));
22-
await this.update({apihost: conf.hosts[0]});
23-
}
24-
25-
if (!global.token) {
26-
await AsyncStorage.removeItem('userData');
27-
await AsyncStorage.removeItem('token');
28-
}
29-
30-
const data = await userAuth();
31-
if (data && data.token) {
32-
await this.update({authState: true, token: data.token});
33-
} else {
34-
await this.update({authState: true, token: null});
35-
}
36-
},
37-
}),
18+
effects: dispatch => ({}),
3819
};

‎HelloWorld/src/models/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import {init} from '@rematch/core';
22
import createLoadingPlugin from '@rematch/loading';
33
import * as global from './global';
4-
import * as users from './users';
54

65
const loadingPlugin = createLoadingPlugin({});
76

87
export const store = init({
98
models: {
109
global: global.default,
11-
users: users.default,
1210
},
1311
plugins: [
1412
loadingPlugin,

‎HelloWorld/src/models/users.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎HelloWorld/src/pages/AuthLoading/index.js‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
1-
import React from 'react';
2-
import {Text, StatusBar, StyleSheet, SafeAreaView} from 'react-native';
3-
import {connect} from 'react-redux';
4-
import {Flex, Loader, H3, Icon} from '@uiw/react-native';
1+
import React, { useEffect } from 'react';
2+
import { Text, StatusBar, StyleSheet, SafeAreaView } from 'react-native';
3+
import { connect } from 'react-redux';
4+
import { Flex, Loader, H3, Icon } from '@uiw/react-native';
55
import Global from '../../global';
6-
import {logoLight} from '../../components/icons/signin';
6+
import { logoLight } from '../../components/icons/signin';
77
import Footer from '../../components/Footer';
8+
import { authToken } from '../../hooks/users'
89

9-
class AuthLoadingScreen extends React.Component {
10-
componentDidMount() {
11-
const {navigation, authToken} = this.props;
10+
const AuthLoadingScreen = ({
11+
navigation,
12+
update,
13+
token,
14+
authState,
15+
children
16+
}) => {
17+
const { mutate, isLoading } = authToken({ update, token })
18+
useEffect(() => {
1219
if (navigation && Global) {
1320
Global.navigation = navigation;
1421
}
15-
authToken();
22+
mutate();
23+
}, [])
24+
25+
if (children && typeof children === 'function' && authState) {
26+
return children(token);
1627
}
17-
render() {
18-
const {token, loading, authState, children} = this.props;
19-
if (children && typeof children === 'function' && authState) {
20-
return children(token);
21-
}
22-
return (
23-
<SafeAreaView style={styles.container}>
24-
<Flex direction="column" justify="center" align="center" style={{flex: 1}}>
25-
<StatusBar barStyle="light-content" />
26-
<Flex justify="center" align="center" direction="column" style={styles.header}>
27-
<Icon xml={logoLight} size={75} />
28-
<H3 style={styles.title}>My APP</H3>
29-
</Flex>
30-
<Flex style={{height: 32, flex: 1, width: '100%'}}>
31-
<Loader loading={loading} maskColor="transtion" vertical rounded={5} tip={<Text style={{color: '#fff', marginTop: 15}}>Verify login...</Text>} />
32-
</Flex>
33-
<Footer style={{marginBottom: 20}} />
28+
return (
29+
<SafeAreaView style={styles.container}>
30+
<Flex direction="column" justify="center" align="center" style={{ flex: 1 }}>
31+
<StatusBar barStyle="light-content" />
32+
<Flex justify="center" align="center" direction="column" style={styles.header}>
33+
<Icon xml={logoLight} size={75} />
34+
<H3 style={styles.title}>My APP</H3>
3435
</Flex>
35-
</SafeAreaView>
36-
);
37-
}
36+
<Flex style={{ height: 32, flex: 1, width: '100%' }}>
37+
<Loader loading={isLoading} maskColor="transtion" vertical rounded={5} tip={<Text style={{ color: '#fff', marginTop: 15 }}>Verify login...</Text>} />
38+
</Flex>
39+
<Footer style={{ marginBottom: 20 }} />
40+
</Flex>
41+
</SafeAreaView>
42+
);
3843
}
3944

4045
export default connect(
41-
({global, loading}) => ({
46+
({ global }) => ({
4247
token: global.token,
4348
authState: global.authState,
44-
loading: loading.effects.global.authToken,
45-
}),
46-
({global}) => ({
47-
updateState: global.update,
48-
authToken: global.authToken,
4949
}),
50+
({ global }) => ({
51+
update: global.update,
52+
})
5053
)(AuthLoadingScreen);
5154

5255
const styles = StyleSheet.create({

0 commit comments

Comments
 (0)