Как связать с текстовыми полями без состояния в реакции / редукции

Question

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

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

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

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

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

Полагаю, этот вопрос - просто проверка работоспособности.Является ли это приемлемым в избыточном?

Answer 1

Вы можете использовать Middleware для добавления Неизменяемости проверки к вашему коду:

В вашем 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())
    )
}

Answer 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;