16-2 RN之账号模块的model

在本节中，我们将创建账号模块的 Model，用于管理用户的登录和登出逻辑。以下是实现步骤：

一、YAPI 接口配置

1. 登录接口：

   • 请求方法：POST

   • 请求地址：/mock/11/login

   • 请求参数：

     • account: 用户账号
     • password: 用户密码

   • 响应数据：

     {
       "status": 100,
       "msg": "登录成功",
       "data": {
         "name": "张三",
         "avatar": "https://example.com/avatar.png"
       }
     }
     

2. 错误响应：

   • 如果账号或密码错误，返回：

     {
       "status": -100,
       "msg": "账号密码错误"
     }
     

二、创建 Model

1. 定义界面类型

   export interface IUser {
     name: string;
     avatar: string;
   }
   
   interface UserModelState {
     user?: IUser;
     isLoggedIn: boolean;
   }
   

2. 创建 Model

   import { Model, Effect } from 'dva-core-ts';
   import axios from 'axios';
   
   const REQUEST_URL = '/mock/11/login';
   
   export interface UserModelType extends Model {
     namespace: 'user';
     state: UserModelState;
     effects: {
       login: Effect;
       logout: Effect;
     };
     reducers: {
       setState: (state: UserModelState, action: { payload: any }) => UserModelState;
     };
   }
   
   const initialState: UserModelState = {
     user: undefined,
     isLoggedIn: false,
   };
   
   const userModel: UserModelType = {
     namespace: 'user',
     state: initialState,
     reducers: {
       setState(state, { payload }) {
         return {
           ...state,
           ...payload,
         };
       },
     },
     effects: {
       *login({ payload }, { call, put }) {
         const { data } = yield call(axios.post, REQUEST_URL, payload);
         if (data.status === 100) {
           yield put({
             type: 'setState',
             payload: {
               isLoggedIn: true,
               user: data.data,
             },
           });
         } else {
           // 处理错误逻辑
         }
       },
       *logout(_, { put }) {
         yield put({
           type: 'setState',
           payload: {
             isLoggedIn: false,
             user: undefined,
           },
         });
       },
     },
   };
   
   export default userModel;
   

三、使用 Model

1. 在 Redux 中添加 Model 在 models/index.ts 文件中添加：

   import user from '@/models/user';
   
   const models = [user];
   

2. 映射状态和派发动作 在组件中使用 connect 函数：

   import { connect, ConnectedProps } from 'react-redux';
   import { RootState } from '@/models/index';
   
   const mapStateToProps = ({ user }: RootState) => ({
     isLoggedIn: user.isLoggedIn,
     user: user.user,
   });
   
   const connector = connect(mapStateToProps);
   
   interface IProps extends ConnectedProps<typeof connector> {}
   

四、总结

在本节中，我们创建了账号模块的 Model，用于管理用户的登录和登出逻辑。通过使用 dva 和 axios，我们实现了与后端接口的交互，并通过 redux 管理用户的登录状态。下一节，我们将实现登录页面的 UI 和表单校验功能。