Я немного новичок в реакции / сокращении

Насколько я понимаю, состояние должно быть неизменным в redux, но при поиске примеров привязки компонентов я продолжаю видеть такие вещи, как

<TextField
  id="usernameId"
  value={this.state.username}    
  onChange={this.handleUsernameChange}
/>

public handleUsernameChange = (event: any) => {
        this.setState({
            username: event.target.value
        });
}

Насколько я понимаю, это мутирующее состояние. Когда я меняю привязку на использование global. В обратных вызовах значения изменяются и обновляются, однако пользовательский интерфейс не отслеживает эти переменные.

Думаю, этот вопрос - просто проверка на вменяемость. Это приемлемо в редукции?

Обратите внимание, что в данный момент я не использую другие библиотеки.

Код, который я пробовал без использования состояния

   let loginInfomation: ILoginInformation = new LoginInformation;
...
   <TextField
      id="usernameId"
      value={this.loginInformation.username}    
      onChange={this.handleUsernameChange}
    />

    public handleUsernameChange = (event: any) => {
          this.loginInfomation.username = event.target.value
       });
    }
2
SCFi 22 Сен 2018 в 21:24

2 ответа

Лучший ответ

Строки - это примитивные типы, и по умолчанию они неизменяемы.
Вы хотите избежать изменения объектов и массивов ссылочного типа.

Хорошо:

let x = 8;
x = 5; // no mutation here

Это считается мутацией:

let arr = [1,2,3];
arr.push(4); // this is mutating the existing array

Таким образом, с помощью ссылочных типов вы можете создавать новые объекты или массивы:

let arr = [1,2,3];
let arr2 = [...arr, 4]; // creating new array;
1
Sagiv b.g 22 Сен 2018 в 18:31

Вы можете использовать промежуточное ПО, чтобы добавить Проверку неизменяемости в свой код:

В вашем configureStore.js:

import { createStore, applyMiddleware } from 'redux';
import reducers from '../reducers';
import immutableCheckMiddleWare from 'redux-immutable-state-invariant';

export function configureStore(initialState) { 
     return createStore(
       rootReducer,
       initialState,
       applyMiddleware(immutableCheckMiddleWare())
    )
}
0
Mselmi Ali 31 Июл 2019 в 10:34