Почему в Redux сохраняется только один символ?

Question

[Ксения]

Здравствуйте! У меня есть форма:

<form onSubmit={register}> 

          <input
            name="name"
            component="input"
            type="text"
            placeholder="Имя и фамилия"
            onChange={setName}
          />
  
</form>

В action:

export function setName(name) {
    return {
      type: 'SET_NAME',
      payload: name,
    }
  }

Получается написать только один символ, который сохраняется в store, но потом нужно начинать сначала.
Скажите, пожалуйста, как исправить эту ошибку?

Answer 1

[Павел Диденко]

Когда прочитаете внимательно эту статью - вы должны все понять Управляемые компоненты

Сейчас вы делаете следующее: на событие onChange повесили action, как только вводите 1 символ в инпут, срабатывает action и меняет стейт в Redux. Redux обновляет состояние и ререндерит ваш компонент, и вы снова вводите символ и снова обновляете этим одним символом свой стейт в редаксе.
UPD: а нет, Redux вам не ререндерит, т.к. вы никак не используете введенное значение. В общем читайте статью и смотрите пример из песочницы

1) Не нужно хранить данные с инпута в Redux, храните его в локальном стейте класса
2) Все данные с формы должны собираться при отправке, в событии onSubmit

Вот пример управляемого компонента - клик

Но попытайтесь разобраться, а не тупо копировать, это очень важно

Comments

[Ксения]

Спасибо за Ваш ответ, Павел Диденко!
Я попробовала собрать все данные с формы:

class Register extends React.Component {

state = {
   name: ""
}

registerName = (e) => {
   this.setState( {name: e.target.value} )
   console.log(this.state.name);
  
}

submit = () => {
   this.props.setCourt(this.state.name);
   console.log(this.props.name)  //ничего не выводит :(
}


render() {
  return (
   <div className="form-group">
           <input className="form-control input-field" 
           onChange={this.registerName} 
            name="name" 
           type="text" 
           input={this.state.name}
           />     
           <button onClick={this.submit}>Submit</button>       
   </div>        
  )
 }
}

Не понимаю, в чём ошибка.

[Павел Диденко]

Ксения, вы логируете this.props.name, а он у вас в state лежит

[Ксения]

Я хочу его перекинуть из state в redux store.
В App.js у меня:

<Route exact path='/' component={()=> <Register setName={setName} 
 name={register.name}  />} />

const mapStateToProps = store => {

    return {
      register: store.register
      }
    }
  
  
  const mapDispatchToProps = dispatch => {
    return {
            setName: name => dispatch(setName(name))
  }
}

[Павел Диденко]

Ксения, выложите в песочницу, по кускам кода не очень понятно, что конкретно у вас там происходит

[Ксения]

Павел Диденко, пока я переносила все файлы в песочницу, я разобралась в проблеме переноса локального стейта в Redux :) Но сейчас я не могу вывести в консоль информацию из Redux store с первого клика, получается только со второго. Я понимаю, что это связано с тем, что функция работает асинхронно, но не знаю, что нужно изменить. Если не сложно, посмотрите, пожалуйста:
https://codesandbox.io/s/intelligent-cerf-ntbip

[Павел Диденко]

Функция работает так, как это задумано и она не асинхронная.
Вот блок кода из функции submit:

this.props.setName(this.state.name);
    console.log("Submitted:" + this.props.name);

Интерпретатор идет по коду сверху вниз и вот что происходит с вашим кодом:
1) Диспатч экшена в редакс
2) логирование текущего пропса
3) изменение стора редакс
4) т.к. изменяется стор, а компонент App слушает изменения стора в компоненте App, он перерисовывается и ререндерит компонент Register с новыми пропсами, и в нем уже логирование идет обновленного стора

Комментарии по коду:
1) Не именуйте файлы и функции redux с большой буквы. Функции с большой буквы в JS - это конструкторы. Используйте camelCase
2) Слушать редакс стор лучше в самом компоненте Register, а не в App. Т.к. App это вообще не нужно. При каждом изменении отслеживаемого свойства в сторе вы ререндерите и App и Register, а должен ререндерится только Register
3) mapDispatchToProps возвращает в итоге объект, поэтому можно использовать синтаксис проще:
a) Вариант 1 - просто вернуть объект
const mapDispatchToProps = { setName };
b) В виде деструктуризации в качестве второго аргумента connect
connect(null, { setName });

[Ксения]

Большое спасибо за такой подробный ответ!
Вы не представляете, как Вы мне помогаете!

Я слушаю редакс стор в App, потому что я предполагала добавить туда все компоненты и им бы передала информацию из стор через props.
Например, сейчас я добавила в песочнице ещё один компонент в App:

<Route
        exact
        path="/calendar"
        component={() => <Calendar name={register.name} />}
/>

В компоненте Register сделала переход на компонент Calendar:

submit = () => {
    this.props.setName(this.state.name);
    window.location = "/calendar";
  };

Но в итоге, компонент Calendar отрисовывает initial_state из редакс-стор, а не то, что сохранилось в компоненте Register. :(

[Павел Диденко]

Ксения, он так делает, потому что вы делаете window.location - вы попадаете на ту страницу путем перезагрузки страницы, а она сбрасывает стейт (и не сохраняет ничего, что вы делали). Вам нужно делать history.push насколько я помню

[Павел Диденко]

Ксения, вынесите роутинг в приложении в отдельный компонент в корневой папке src, роуты должны переходить на компоненты-страницы, их вынесите в папки pages. И вот в самих страницах юзайте коннект, чтобы получать данные из редакс стора. Если ваше приложение будет разрастаться, то каждое отслеживаемое изменение стора будет ререндерить все ваше приложение, а это неправильно

[Павел Диденко]

Ксения, P.S. Если хотите писать качественный код и хорошо разобраться в том, что делаете - пройдите этот курс https://www.udemy.com/course/pro-react-redux мне он очень помог, в т.ч. найти работу

[Ксения]

Большое спасибо за все советы! Я вам очень-очень благодарна!

Answer 2

[Ant Li]