React中如何利用Redux Store在页面切换/重载时回填输入框

1. 安装必要依赖 #

确保项目已安装Redux相关工具及状态持久化库：

npm install @reduxjs/toolkit react-redux redux-persist

2. 创建输入状态管理的Redux Slice #

在src/store/slices/inputSlice.js中定义状态结构和处理逻辑：

import { createSlice } from '@reduxjs/toolkit';

// 初始化状态，对应需要缓存的输入字段
const initialState = {
  userInputs: {
    username: '',
    email: '',
    phone: ''
  }
};

const inputSlice = createSlice({
  name: 'inputs',
  initialState,
  reducers: {
    // 更新单个输入字段
    updateInput: (state, action) => {
      const { field, value } = action.payload;
      state.userInputs[field] = value;
    },
    // 清空所有输入
    clearAllInputs: (state) => {
      state.userInputs = initialState.userInputs;
    }
  }
});

export const { updateInput, clearAllInputs } = inputSlice.actions;
export default inputSlice.reducer;

3. 配置带持久化的Redux Store #

修改src/store/store.js，集成redux-persist实现页面重载时状态不丢失：

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import inputReducer from './slices/inputSlice';

const persistConfig = {
  key: 'input-root',
  storage,
  // 可选：配置黑名单，指定不需要持久化的状态字段
  // blacklist: ['otherSlice']
};

// 包装reducer以支持持久化
const persistedReducer = persistReducer(persistConfig, inputReducer);

export const store = configureStore({
  reducer: {
    inputs: persistedReducer,
    // 可添加其他业务reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 关闭序列化检查，避免persist相关警告
    }),
});

export const persistor = persistStore(store);

4. 根组件中注入PersistGate #

修改src/index.js，确保持久化状态在应用启动时恢复：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

5. 在表单组件中绑定Redux状态 #

创建表单组件src/components/InputForm.js，实现输入绑定与自动回填：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateInput, clearAllInputs } from '../store/slices/inputSlice';

const InputForm = () => {
  // 从Redux中获取缓存的输入状态
  const { userInputs } = useSelector(state => state.inputs);
  const dispatch = useDispatch();

  // 输入变化时同步更新Redux状态
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    dispatch(updateInput({ field: name, value }));
  };

  return (
    <div className="input-form">
      <div className="form-item">
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          value={userInputs.username}
          onChange={handleInputChange}
          placeholder="请输入用户名"
        />
      </div>
      <div className="form-item">
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={userInputs.email}
          onChange={handleInputChange}
          placeholder="请输入邮箱"
        />
      </div>
      <div className="form-item">
        <label>手机号：</label>
        <input
          type="tel"
          name="phone"
          value={userInputs.phone}
          onChange={handleInputChange}
          placeholder="请输入手机号"
        />
      </div>
      <button onClick={() => dispatch(clearAllInputs())}>清空所有输入</button>
    </div>
  );
};

export default InputForm;

6. 功能验证 #

• 输入内容后切换页面，返回时输入框会自动回填之前的内容；
• 刷新页面后，本地存储的状态会被Redux恢复，输入框内容依然保留。

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