Есть ли лучший подход для обновления сложных интерфейсов, чтобы изменения отражались в поле зрения?

Question

Как мне обновить сложный интерфейс в качестве реквизита в представлениях после его обновления в магазине?

В следующем случае я пытаюсь выполнить проверку в редукторе.На основании проверки я должен обновить метку и сообщение об ошибке.Хотя магазин обновляется, я не могу t see the update in the view. Also, when I type in, I can не видеть текст на моем экране, хотя он отправляется в магазин?

RegistrationForm.tsx

import * as React from 'react';
import { Input } from 'src/FormUtilities/Input';
import { IUserProps } from '../userEntitities';

interface IProps{
    user:IUserProps
    onChange:(name:string, value:string)=>void
}

export const RegistrationForm =(props:IProps) =>{

        return(
            <div>
                <Input name={props.user.FirstName.Name}                
                 label= {props.user.FirstName.Name}
                 placeholder= ''
                 value=''
                 onChange={props.onChange}
                 error= {props.user.FirstName.ErrorMessage} />

                  <Input name={props.user.Email.Name}                
                 label= {props.user.Email.Name}
                 placeholder= ''
                 value=''
                 onChange={props.onChange}
                 error= {props.user.Email.ErrorMessage} />
            </div>
        )

    }

---

actions.ts

    import * as actionsEnums  from './actionEnums';

    interface IUpdateField{    
        type: actionsEnums.FIELD_CHANGED,
        value: string,
        name:string
    }
    export const updateField = (name:string, value:string):IUpdateField => ({ 
        'name' : name,
        type: actionsEnums.FIELD_CHANGED,     
        'value': value     
    });

export type UserAction = IUpdateField

---

reducer.ts

import * as constants from './actionEnums';
import {UserAction} from './actions'
import { IField } from './userEntitities';

export interface IUserState {
    user:{
        Email:IField,
        FirstName: IField 
    }  
}
export const setDefaultUserState:() => IUserState = () => ({
    user: {
      Email: {
        ErrorMessage: '',
        Label:'Email',
        Name:'Email',            
        Text: ''
      },       
      FirstName: {
        ErrorMessage: '',
        Label:'Name',
        Name:'Name',            
        Text: ''
      },
    }}
  )

export const userRegistrationReducer = (state= setDefaultUserState(), action:UserAction):IUserState =>{
    switch (action.type)
    {
        case constants.FIELD_CHANGED:
            return validateField(state, action.name, action.value)

        default: return state
    }
}

const validateField = (state: IUserState, name:string, value:string) => {

   if(name==='Name')
   {
       if(value===''){
        return {

                ...state, FirstName: { ...state.user.FirstName, ErrorMessage: "Invalid name" } }

        }
    }
   if(name==='Email'){
        if (!value.includes("@"))
        {
                return{
                    ...state,ErrorMessage:'Invalid Email', Label:'Email *' 
                }

        }
    }
    return {
        ...state
    }

  };

---

RegistrationContainer

import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { IState } from 'src/Redux lessons';
import {updateField, UserAction} from './actions'
import {RegistrationForm} from './Components/RegistrationForm'


const mapStateToProps = (state:IState)=>
({
        user: state.userRegistrationReducer.user
})

const mapDispatchToProps = (dispatch: Dispatch<UserAction>)=>{
    return {
        onChange:(name:string, value:string)=>dispatch(updateField(name, value))
    }
}

export const RegistrationFormContainer = connect(mapStateToProps, mapDispatchToProps)(RegistrationForm)

---

index.ts

import { combineReducers} from 'redux';
import {IUserState, userRegistrationReducer} from '../Registration/reducers'
import { IUserColorState, userReducer} from './Lesson4/redux/userColorReducer'

export interface IState{
    userRegistrationReducer : IUserState,
    userReducer:IUserColorState
}

export const reducers = combineReducers<IState>({
    userReducer,
    userRegistrationReducer,    
})

Answer 1

Ах!Я просто вижу пб.Всегда добавляйте текущее типизированное состояние во входные значения.Пример:

<Input name={props.user.FirstName.Name} 
label= {props.user.FirstName.Name} 
placeholder= '' 
value={props.user.Email.Text} 
onChange={props.onChange} 
error= {props.user.FirstName.ErrorMessage} 
/>

Возможно, вам не нужно включать каждую набранную букву в редуктор для оптимизации производительности.

Вы можете сделать это: текущие введенные данные в состоянии, а затем отправить данные с помощью кнопки onClick.используйте onChange для уменьшения, только если вы хотите получить немедленный результат для каждой печатной буквы

Answer 2

Если вы передаете данные без логики проверки, редуктор работает или нет?

проверьте это, например:

export const userRegistrationReducer = (state= setDefaultUserState(), action:UserAction):IUserState =>{
    switch (action.type)
    {
        case constants.FIELD_CHANGED:
            return action.name

        default: return state
    }
}