如何使用React Redux存储POST API响应并在下一页展示账号信息

1. 前置依赖安装 #

直接安装Redux官方推荐的工具集包，比原生手写Redux减少80%模板代码：

npm install @reduxjs/toolkit react-redux

2. 配置全局Store与状态切片 #

首先创建用户状态切片，对应接口返回的字段结构定义存储规则：

// src/features/user/userSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  responseCode: '',
  responseDesc: '',
  accountNumbers: [],
  cifNumber: ''
}

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // 存储登录接口返回数据的同步方法
    setLoginResponse: (state, action) => {
      const payload = action.payload
      state.responseCode = payload.responseCode
      state.responseDesc = payload.responseDesc
      // 解构接口data下的业务字段，加兜底逻辑避免渲染报错
      state.accountNumbers = payload.data?.accountNumbers || []
      state.cifNumber = payload.data?.cifNumber || ''
    },
    // 可选：退出登录时清空全局用户状态
    clearUserState: () => initialState
  }
})

export const { setLoginResponse, clearUserState } = userSlice.actions
export default userSlice.reducer

接着配置全局Store，注册用户状态模块：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit'
import userReducer from '../features/user/userSlice'

export const store = configureStore({
  reducer: {
    user: userReducer
  }
})

最后在项目入口文件挂载Redux上下文，实现全局状态生效：

// src/main.jsx （React 18标准写法）
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './app/store'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

3. 登录页POST请求成功后存入Redux #

在登录接口请求成功的回调里，把响应数据分发到Redux存储，再跳转到目标页面：

// src/pages/Login.jsx
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { setLoginResponse } from '../features/user/userSlice'

export default function Login() {
  const [formData, setFormData] = useState({username: '', password: ''})
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const handleLogin = async () => {
    try {
      // 替换为项目实际的POST接口请求逻辑
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(formData)
      }).then(res => res.json())

      // 匹配接口成功标识，成功后存数据再跳转
      if (res.responseCode === '00') {
        dispatch(setLoginResponse(res))
        navigate('/account')
      } else {
        // 自行处理登录失败逻辑，比如错误提示
        console.error(res.responseDesc)
      }
    } catch (err) {
      console.error('登录请求异常', err)
    }
  }

  return (
    <div>
      {/* 登录表单正常绑定formData即可，此处省略输入框代码 */}
      <button onClick={handleLogin}>登录</button>
    </div>
  )
}

4. 下一页面读取存储的账号数据并展示 #

在需要展示账号的页面，直接从Redux全局状态读取数据渲染即可：

// src/pages/Account.jsx
import { useSelector } from 'react-redux'

export default function Account() {
  // 从全局Store拉取需要的用户状态
  const { accountNumbers, cifNumber, responseDesc } = useSelector(state => state.user)

  return (
    <div className="account-page">
      <p>登录结果：{responseDesc}</p>
      <p>CIF编号：{cifNumber}</p>
      <div>
        <p>绑定账号列表：</p>
        <ul>
          {accountNumbers.map((accNum, idx) => (
            <li key={idx}>{accNum}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

注意事项 #

• 以上为生产环境标准Redux写法，不需要手写冗余的action type常量、switch分支判断
• 如果需要刷新页面后Redux数据不丢失，可以额外引入redux-persist做状态持久化，将user模块缓存到localStorage或sessionStorage即可
• 代码中已经加了字段空值兜底，即使接口返回结构异常也不会导致页面渲染崩溃，实际开发可根据接口规则调整兜底逻辑

内容的提问来源于stack exchange，提问作者vinothini K B