feat:rematch

App.tsx

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-22 15:13:57
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-27 14:00:04
+ * @LastEditTime: 2021-01-28 13:30:36
  * @FilePath: \App.tsx
  */
 /**
@@ -17,14 +17,15 @@
 import React from 'react';
 
 import Navigation from './src/router/index';
-
+import {Provider} from 'react-redux';
+import store from './src/store/index';
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
   return (
-    <>
+    <Provider store={store}>
       <Navigation />
-    </>
+    </Provider>
   );
 };
 

package.json

@@ -8,7 +8,7 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "icon":"node ./src/script/iconScript.js"
+    "icon": "node ./src/script/iconScript.js"
   },
   "dependencies": {
     "@ant-design/react-native": "^4.0.7",
@@ -23,13 +23,16 @@
     "@react-navigation/drawer": "^5.12.3",
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.1",
+    "@rematch/core": "^1.4.0",
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.2",
-    "react-native-vector-icons": "^8.0.0"
+    "react-native-vector-icons": "^8.0.0",
+    "react-redux": "^7.2.2",
+    "redex": "^0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

src/router/StackNavigation.js

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-25 14:42:30
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-27 13:56:19
+ * @LastEditTime: 2021-01-28 13:06:53
  * @FilePath: \src\router\StackNavigation.js
  */
 
@@ -13,6 +13,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import Home from '../views/Home';
 import Details from '../views/Details';
 import IconPage from '../views/IconPage';
+import RematchPage from '../views/Rematch';
 const Stack = createStackNavigator();
 
 function StackNavigation() {
@@ -26,6 +27,7 @@ function StackNavigation() {
         />
         <Stack.Screen name="Details" component={Details} />
         <Stack.Screen name="IconPage" component={IconPage} />
+        <Stack.Screen name="RematchPage" component={RematchPage} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/store/index.ts

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-28 13:07:27
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-28 13:10:45
+ * @FilePath: \src\store\index.ts
+ */
+import {init} from '@rematch/core';
+import * as models from './models';
+const store = init({
+  models,
+});
+export default store;

src/store/models/home.ts

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-28 13:07:52
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-28 13:08:45
+ * @FilePath: \src\store\models\home.ts
+ */
+export const home = {
+  state: {
+    num: 1, //定义数据
+  },
+  //   同步方法
+  reducers: {
+    // handle state changes with pure functions
+    add(state: any, payload: any) {
+      // state 就是定义的 state
+      // payload 就是调用时传过来的参数
+
+      // 更新数据时，要copy 一份再更新
+      return {...state, num: state.num + payload};
+    },
+  },
+  // 异步方法
+  effects: {
+    async AsyncAdd(payload: any, rootState: any) {
+      // payload 就是调用时传过来的参数
+      // rootState 定义的全部store数据
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // 使用this 调用reducers里的方法
+      this.add(payload);
+    },
+  },
+};

src/store/models/index.ts

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-28 13:08:20
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-28 13:10:34
+ * @FilePath: \src\store\models\index.ts
+ */
+export {home} from './home';
+export {user} from './user';

src/store/models/user.ts

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-28 13:08:28
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-28 13:10:17
+ * @FilePath: \src\store\models\user.ts
+ */
+export const user = {
+  state: {
+    name: 'VT', //定义数据
+  },
+};

src/views/Home.js

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-25 14:44:12
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-27 14:07:30
+ * @LastEditTime: 2021-01-28 13:32:42
  * @FilePath: \src\views\Home.js
  */
 import {Button} from '@ant-design/react-native';
@@ -26,6 +26,10 @@ const Home = (props) => {
       <Button type="primary" onPress={() => navigation.navigate('IconPage')}>
         Icon
       </Button>
+
+      <Button type="primary" onPress={() => navigation.navigate('RematchPage')}>
+        状态管理-Rematch
+      </Button>
     </>
   );
 };

src/views/Rematch.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-28 13:05:52
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-28 13:34:09
+ * @FilePath: \src\views\Rematch.js
+ */
+import {Button} from '@ant-design/react-native';
+import React from 'react';
+import {Text, View} from 'react-native';
+import {useSelector, useDispatch, useStore} from 'react-redux';
+const RematchPage = (props) => {
+  const store = useStore();
+  let storeState = store.getState(); // 获取定义的全部store
+
+  const {num} = useSelector((state) => state.home); // 获取home模块的值
+
+  const {name} = useSelector((state) => state.user); // 获取user模块的值
+
+  // 获取Dispatch 方法
+  const dispatch = useDispatch();
+  const {add, asyncAdd} = dispatch.home;
+  return (
+    <>
+      <View>
+        <Text>首页</Text>
+        <Text>{name}</Text>
+
+        <Text>{num}</Text>
+        <Button type="primary" onPress={() => add(1)}>
+          加1
+        </Button>
+        <Button type="primary" onPress={() => dispatch.home.AsyncAdd(1)}>
+          异步加1
+        </Button>
+      </View>
+    </>
+  );
+};
+
+export default RematchPage;

tsconfig.json

@@ -26,7 +26,7 @@
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "noImplicitThis": false,                /* Raise error on 'this' expressions with an implied 'any' type. */
     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
     /* Additional Checks */