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

Question

即使在页面重新加载之后，我仍然需要持久化redux表单字段。所以我的方法是

• 首先，在页面刷新之前，我的组件中的所有字段值都将保存到componentDidUpdate方法componentDidUpdate(prevProps, prevState) { prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null }中的本地存储中。
• 然后，在页面刷新之后，我将检查本地存储中是否有可用的字段，然后将这些字段对象直接分配给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组件中的“列表”、"pgu“、"commonFields”值。列表对象包含嵌套级别的对象。在迭代和访问它时，列表对象中嵌套对象的所有"value“属性值都被转换为对象。

从这个讨论中https://github.com/erikras/redux-form/issues/576，我了解到我们必须调用value属性的value属性，如下所示

listings[0].entry.value.value

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

那么有什么快速解决办法来解决这个问题吗？或者是在最新版本的redux-form中修正了？我目前使用的是"redux-form"："^4.2.0"，

Answer 1

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

Answer 2

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

我在slicer的config对象中编写了一个自定义的redux-localstorage，以便它知道要持久化的表单状态的哪一部分。下面是我的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-localstorage config.slicer 文档。

编辑：--毕竟，我决定继续设置initialValues，因为我希望组合一种方法，使表单中的默认值与持久化表单数据相结合。在我以前的解决方案中，我注意到在持久化redux-form values的同时使用redux-form会引起问题。但是，将表单数据复制到存储区中的一个单独的键中，以及使用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')
);