Redux-Saga结合Formik存储用户输入到Redux及登录流程相关问题咨询

问题1：Action中data字段的含义和作用 #

Redux的Action本质是普通JavaScript对象，必须包含type字段区分动作类型，其余字段都是开发者自定义的、用于携带附加参数的自定义字段，这份代码里作者统一用data字段承载所有附加参数：

• LoginRequested里的data存用户输入的账号密码，和你理解的一致
• LoginSuccessed的data是预留字段，正常场景下可以存接口返回的用户信息（比如用户ID、昵称、权限token等），这份示例代码的Reducer没有用到这个字段，所以暂时没有实际赋值
• LoginFailed的data是预留字段，正常可以存错误码、错误提示文案等，示例里直接硬编码了错误提示，所以也没有用到
• Logout的data是预留字段，正常可以存退出登录的附加配置（比如是否需要清空本地缓存的标记），示例没有用到

问题2：isLoading和authen的具体作用 #

两个字段都是全局登录状态标记，供业务层直接消费：

• isLoading：你可以看登录页的代码，通过useSelector拿到这个字段的值，值为true时页面隐藏登录按钮、显示加载动画，一方面给用户操作反馈，另一方面避免用户重复点击提交按钮发起多次登录请求
• authen是身份鉴权标记，通常用于路由拦截逻辑：比如APP启动时先读取AsyncStorage的用户信息，如果存在有效信息就把authen设为true，直接跳转到APP首页；如果为false就强制跳转到登录页；需要登录权限的页面也可以用这个字段做访问拦截。示例里登录成功就把authen设为true，登录失败/退出登录就重置为初始值false。

问题3：Saga相关理解是否正确，action参数的含义 #

你的理解基本正确，补充两点：

1. 比对逻辑不是和Redux存储的密码比对，是和fetchLoginData返回的假接口数据比对
2. loginSaga里的action参数不是随机命名的，它就是你dispatch的那个Redux Action对象本身，和Reducer接收的action是完全相同的对象，所以你可以直接取到action.data里存的账号密码。

问题4：loginHandler参数为什么是对象解构形式 #

这是ES6的对象解构语法，因为Formik的onSubmit回调默认第一个入参是整个表单的values对象，结构是{username: '用户输入的账号', password: '用户输入的密码'}。用({username,password})的写法可以直接从入参对象里把需要的字段提取出来，不用写values.username、values.password，简化代码。如果写成普通的(username,password)形式，第一个参数会是整个values对象，第二个参数是Formik的辅助函数集合，无法直接拿到你需要的两个字段值。

问题5：Formik的onSubmit取值逻辑 #

这是Formik的内置表单管理机制：

1. 你给每个AppFormField设置的name属性就是Formik的字段映射标记，name="username"的输入框的输入值会自动同步到values.username，name="password"的输入框值会同步到values.password，完全靠name属性区分字段
2. 你给AppForm传入了initialValues，初始化了所有表单字段的默认值，Formik内部会自动监听所有绑定了name属性的输入框的输入事件，实时更新values对象
3. 点击提交按钮时，Formik会自动把最新的values对象作为第一个参数传给你绑定的onSubmit回调也就是loginHandler，所以不需要你手动传参
4. 如果有3个输入项，只需要给第三个输入框设置唯一的name属性（比如verificationCode），同时在initialValues里添加对应字段的初始值，之后在loginHandler的解构参数里加上对应字段名就能直接拿到值，不需要修改其他逻辑。

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh