使用 initialValues 属性将本地存储值持久化到 redux 表单字段中

Posted 2023-02-22

【中文标题】使用 initialValues 属性将本地存储值持久化到 redux 表单字段中

【英文标题】：Persisting the localstorage values into redux form fields using initialValues attribute

【发布时间】：2017-02-01 03:21:45

【问题描述】：

即使在页面重新加载后，我也需要保留 redux 表单字段。 所以我的方法是

首先在页面刷新之前，我的组件中的所有字段值将在 componentDidUpdate 方法中保存到 localstorage componentDidUpdate(prevProps, prevState) prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null

然后在页面刷新后，我正在检查 localstorage 中是否有可用的字段，然后我将这些字段对象直接分配给我的 reduxform 初始值

let reduxFormFunc = reduxForm( form: 'rentSelection', destroyOnUnmount: false, fields: guestEntryFields, validate, initialValues: getInitFields() , selectProps ) function getInitFields() let initValues = pgu: defaultpgu if(localStorage.getItem('fields') && JSON.parse(localStorage.getItem('fields')).listings.length>0) console.log('selecting and assigning fields from localstorage') let fields = JSON.parse(localStorage.getItem('fields')) console.log(fields) initValues['commonFields'] = fields.commonFields initValues['listings'] = fields.listings initValues['pgu'] = fields.pgu console.log(initValues) return initValues export default reduxFormFunc(GuestEntry)

现在我可以在我的 GuestEntry react 组件中访问“listings”、“pgu”、“commonFields”值。并且列表对象包含对象的嵌套级别。在迭代和访问它时，它的所有“value”属性 String 列表对象内的嵌套对象的值都被转换为对象

从这个讨论 https://github.com/erikras/redux-form/issues/576 我知道我们必须在 value 属性上调用 value 属性，像这样

listings[0].entry.value.value

这里的 value 是一个字符串，但是当它转换为对象时，我需要调用 value.value。

那么有什么快速解决方案可以解决这个问题吗？ 还是在最新版本的 redux-form 中修复？我目前正在使用 "redux-form": "^4.2.0",

【问题讨论】：

redux-persist 非常适合这个。

【参考方案1】：

我在这个版本中没有找到任何替代方式，所以我只是更新了代码，如果我将值作为对象的实例获取，那么我将使用“object. value”，否则我只是简单地返回值。

【参考方案2】：

我不确定这是否是最佳做法，但我很简单，使用 redux-localstorage 将 redux-form values 字段保存到本地存储。这意味着表单状态对象将在验证规则和注册字段等方面保持原样，但值将保持不变（这很重要，因为我不希望验证告诉我字段在它们之前是无效的触摸）。

我在redux-localstorage 的config 对象中编写了一个自定义slicer，以便它知道要保留表单状态的哪一部分。以下是我的 store.js 文件的示例（我在此特定应用程序中使用 redux-thunk，您可能不会）：

import  createStore, compose, applyMiddleware  from 'redux';
import thunk from 'redux-thunk';
import persistState from 'redux-localstorage';
import rootReducer from './reducers/root';

const enhancer = compose(
  applyMiddleware(thunk),
  persistState(['someOtherStateKey', 'form'], 
    slicer: paths => state => 
      let persist = ;
      paths.forEach(path => 
        switch (path) 
          case 'form':
            persist[path] = 
              myFormName: 
                values: state[path].myFormName.values,
              ,
            ;
            break;
          default:
            persist[path] = state[path];
        
      );
      return persist;
    ,
  )
);

function configureStore() 
  return createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
    enhancer
  );


const store = configureStore(); // I instantiate here so I can `import` in utils files
export default store;

我的Form.js 将包含以下代码：

Form = reduxForm(
  form: 'myFormName',
)(Form);

在此示例中，您无需担心手动更新或从本地存储中检索，也不需要组件挂载或卸载侦听器。

查看redux-localstorageconfig.slicerdocs了解更多信息。

编辑： 毕竟我决定设置initialValues，因为我想结合一种在表单中具有默认值以及持久化表单数据的方法。在我之前的解决方案中，我注意到使用 initialValues 和持久化 redux-form values 会导致问题。但是，将表单数据复制到存储中的单独键以及使用initialValues 似乎可以解决问题。

为此，我在 Redux 表单初始化期间将 initialValues 设置为我的默认表单状态（保存在 redux 存储中）和持久表单值（也保存在存储中）的组合。我还使用onChange 处理程序来执行我的操作创建器，它将表单值存储在商店的单独部分中，redux-localstorage 坚持这一点。代码如下：

// initialState.js
export default 
  values: 
  initialValues: 
    agreeToTerms: false,
  ,
;

// Form.js
Form = connect(state => (
  initialValues: 
    ...state.initialValues, // our defaults
    ...state.values, // our persisted values
  ,
  onChange: (values, dispatch, props) => 
    props.myReduxActionFile.updateValues(values);
  ,
))(Form);

// myReduxActionFile.js
...code to dispatch action to update store.values

// store.js
const enhancer = compose(
  applyMiddleware(thunk),
  persistState('values')
);