React Redux获取登录POST接口响应 跨页下拉框展示账号

1. 登录接口响应字段提取 #

首先判断登录成功状态，当responseCode为"00"时提取目标字段，示例请求逻辑如下：

// 登录接口请求方法示例
import axios from 'axios'

export const loginApi = async (params) => {
  const res = await axios.post('/api/login', params)
  const response = res.data
  if (response.responseCode === '00') {
    // 按实际响应结构取数，示例中accountNumbers可直接从根层级取，若后端未做扁平化则取response.data.accountNumbers
    return {
      success: true,
      token: response.accessToken,
      accountList: response.accountNumbers,
      cifNumber: response.cifNumber
    }
  }
  return {
    success: false,
    msg: response.responseDesc
  }
}

2. Redux 全局状态配置 #

推荐使用官方维护的Redux Toolkit编写状态逻辑，减少样板代码：

2.1 编写用户状态切片 #

// src/store/slices/userSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  accessToken: '',
  accountNumbers: [], // 存储跨页面共享的账号列表
  cifNumber: ''
}

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // 登录成功后写入用户信息
    setLoginInfo: (state, action) => {
      state.accessToken = action.payload.token
      state.accountNumbers = action.payload.accountList
      state.cifNumber = action.payload.cifNumber
    },
    // 退出登录时清空状态
    clearLoginInfo: (state) => {
      state.accessToken = ''
      state.accountNumbers = []
      state.cifNumber = ''
    }
  }
})

export const { setLoginInfo, clearLoginInfo } = userSlice.actions
export default userSlice.reducer

2.2 挂载到Store #

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit'
import userReducer from './slices/userSlice'

export const store = configureStore({
  reducer: {
    user: userReducer
    // 其他业务模块的reducer可在此处追加
  }
})

如果需要避免页面刷新后Redux数据丢失，可以接入redux-persist对user模块做持久化存储，数据会自动同步到localStorage/sessionStorage，无需手动操作本地存储。

3. 登录页提交时写入全局状态 #

登录接口请求成功后，触发dispatch将账号列表存入Redux：

// 登录页组件示例
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { setLoginInfo } from '@/store/slices/userSlice'
import { loginApi } from '@/api/login'

export default function Login() {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const handleLoginSubmit = async (formValues) => {
    const result = await loginApi(formValues)
    if (result.success) {
      // 将接口返回的账号等信息存入全局状态
      dispatch(setLoginInfo({
        token: result.token,
        accountList: result.accountList,
        cifNumber: result.cifNumber
      }))
      // 跳转至业务首页
      navigate('/dashboard')
    } else {
      // 登录失败提示
      alert(result.msg)
    }
  }

  // 登录表单JSX逻辑省略
  return <div>{/* 登录表单 */}</div>
}

4. 业务页面读取状态渲染下拉框 #

在需要展示账号选择器的页面，从Redux中读取账号列表，遍历渲染下拉选项即可：

// 业务页面组件示例
import { useSelector } from 'react-redux'

export default function TransferPage() {
  // 从全局状态读取账号列表
  const accountList = useSelector(state => state.user.accountNumbers)

  return (
    <div>
      <span>选择转出账号：</span>
      <select style={{ width: 200, padding: '4px 8px' }}>
        {accountList.map(accountNo => (
          <option key={accountNo} value={accountNo}>{accountNo}</option>
        ))}
      </select>
    </div>
  )
}

如果使用Antd、MUI等第三方UI组件库的Select组件，只需要替换原生select标签，遍历生成Option的逻辑完全一致。

注意事项 #

• 取接口字段前建议先打印完整响应确认层级，示例响应中accountNumbers同时出现在data子对象和响应根层级，实际开发时和cifNumber等业务字段保持相同取数路径即可，避免层级判断错误拿到undefined
• 未做持久化的Redux状态会在页面刷新后重置，生产环境建议对登录态相关数据做持久化处理
• 渲染下拉选项时必须给option设置唯一key，账号本身具备唯一性，可直接用账号作为key值
• 接口返回登录失败时不要写入全局状态，避免产生脏数据

内容的提问来源于stack exchange，提问作者Karthiga