Состояние Redux теряется, когда пользователь уходит - PullRequest
Новая
       8

Состояние Redux теряется, когда пользователь уходит

0 голосов
/ 11 апреля 2019

У меня есть простое приложение React, где я отображаю выпадающий список в форме редукса.Пользователь выбирает параметр из этого раскрывающегося списка, и этот параметр отображается в компоненте заголовка.

Этот параметр хранится в хранилище примитивов благодаря избыточной форме и доступен через функцию formValueSelector (опять же из излишней формы).Lib).

Однако этот выбранный пользователем параметр теряется в хранилище приставок, когда пользователь перенаправляет на новую страницу в приложении. Как я могу это исправить?

Я попытался обернуть свой заголовоккомпонент с withRouter, но, похоже, это не исправило ..

Вот мой компонент домашней страницы с избыточной формой: 

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Link } from 'react-router-dom'

const centres = ['Ponders End', 'North Finchley', 'Hendon', 'Walthamstow']

const renderCentreDropdown = ({ input, label }) => {
  console.log({ input })
  return (
    <div className="inline field">
      <label>{label}</label>
      <select {...input} >
        <option value="">Select a centre...</option>
        {centres.map(centre => (
          <option value={centre} key={centre}>
            {centre}
          </option>
        ))}
      </select>
    </div>
  )
}

let HomePage = () => {
  return (
    <div className="ui middle aligned center aligned grid">
      <div className="column">
        <form className="ui large form">
          <div className="ui segment">
            <Field name="centreSelect" label="Select a centre: " component={renderCentreDropdown} />
            <div className="field">
              <div className="ui left icon input">
                <i className="user icon" />
                <input type="text" name="email" placeholder="E-mail address" />
              </div>
            </div>
            <div className="field">
              <div className="ui left icon input">
                <i className="lock icon" />
                <input type="password" name="password" placeholder="Password" />
              </div>
            </div>
          </div>
          <Link to="/todaysclass" className="ui fluid large pink submit button">Login</Link>
        </form>
      </div>
    </div>
  )
}

HomePage = reduxForm({
  form: 'centreSelectForm'
})(HomePage)

export default HomePage

, а вот мой компонент Header: 

import React from 'react'
import { connect } from 'react-redux'
import moment from 'moment'
import { formValueSelector } from 'redux-form'

class Header extends React.Component {

  render() {
    console.log(this.props)
    return (
      <div className="ui secondary menu" >
        <h2 className="ui dividing header">Axis Tuition Centre{(this.props.centreName) ? ` - ${this.props.centreName}` : ''} </h2>
        <div className="right menu" >
          {moment().format('Do MMMM YYYY')}
        </div>
      </div>
    )
  }
}


const selector = formValueSelector('centreSelectForm')

export default connect(state => {
  const centreName = selector(state, 'centreSelect')
  return {
    centreName
  }
})(Header)

1 Ответ

1 голос
/ 11 апреля 2019

По умолчанию redux-form уничтожает состояние формы, когда компонент, в котором присутствует форма, отключает монтирование, поэтому для сохранения состояния формы и доступа к нему в других компонентах или после маршрутизации установите destroyOnUnmount: false в reduxForm в HomePage.

Это будет работать для вас: 

HomePage = reduxForm({
  form: 'centreSelectForm',
  destroyOnUnmount: false
})(HomePage)
...