Redux-Form 7.3.0修改URL跳转后formValueSelector取值异常

这问题我之前也碰到过，核心差异来自两种跳转方式的本质区别，以及Redux-Form的状态存储逻辑：

一、两种跳转方式的本质差异 #

• React Router的<Link>跳转：这是单页应用（SPA）的客户端路由切换，不会触发浏览器的页面刷新。整个React应用和Redux Store都保持运行状态，Redux-Form存在Store里的表单值自然也会完整保留，所以新页面能用formValueSelector正常获取。
• 直接修改URL跳转：不管是地址栏手动输入、浏览器刷新，还是通过window.location跳转，都会触发浏览器的页面重载。这时候整个React应用会重新初始化，Redux Store也会被重置为初始状态——之前存在Store里的Redux-Form表单值全部丢失，所以formValueSelector去Store里查找对应值时，只能返回undefined。

二、Redux-Form的状态存储逻辑 #

Redux-Form 7.x版本是将表单的所有状态（包括输入值、校验状态、提交状态等）都存储在Redux的全局Store中，而非组件内部状态。一旦页面刷新，Store被清空，这些状态就无法恢复，新页面自然拿不到之前的表单值。

三、解决方案 #

方案1：统一使用客户端路由跳转 #

尽量避免直接修改URL的跳转方式，统一使用React Router提供的<Link>组件，或者通过history.push()/history.replace()方法进行路由切换，确保应用始终在不刷新页面的情况下完成路由跳转，保留Redux Store的状态。

方案2：实现Redux状态持久化 #

如果业务场景必须支持直接URL跳转（比如用户手动刷新页面后仍需保留表单值），可以给Redux Store添加状态持久化逻辑：

• 可以手动监听Redux Store的变化，将Redux-Form相关的状态同步存储到localStorage或sessionStorage中；
• 也可以使用redux-persist这类成熟的库，配置只持久化Redux-Form对应的Store分支，在应用初始化时从存储中恢复状态。

举个简单的手动实现示例：

// 监听Store变化，保存表单状态
store.subscribe(() => {
  const formState = store.getState().form.yourFormName; // 替换成你的表单名
  if (formState) {
    localStorage.setItem('yourFormState', JSON.stringify(formState));
  }
});

// 应用初始化时恢复状态
const initialState = {
  form: {
    yourFormName: localStorage.getItem('yourFormState') 
      ? JSON.parse(localStorage.getItem('yourFormState')) 
      : {}
  }
};
const store = createStore(rootReducer, initialState);

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