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

Question

即使在页面重新加载后，我也需要保留 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",

Answer 1

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

Answer 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')
);