Сохранение значений localstorage в полях избыточной формы с использованием атрибута initialValues

Я не нашел альтернативного способа в этой версии, поэтому я просто обновил код таким образом, что если я получаю значение как экземпляр объекта, я отвечаю значением, используя «object.value», иначе я просто возвращаю значение.

Я не уверен, что это лучшая практика, но я просто использую 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, так как хотел объединить метод наличия значений по умолчанию в форме, а также сохранения данных формы. В моем предыдущем решении я заметил, что использование initialValues наряду с сохранением redux-form values вызовет проблемы. Однако копирование данных формы в отдельный ключ в хранилище, а также использование initialValues, похоже, помогло.

Для этого я устанавливаю initialValues во время инициализации Redux Form в комбинацию моего состояния формы по умолчанию (хранящегося в хранилище 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')
);