Question

在商店中更新复杂接口后，如何在视图中将其更新为props？

在以下情况下，我试图在reducer中进行验证。基于验证，我必须更新标签和错误消息。尽管商店正在更新，但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

如果在没有验证逻辑的情况下传递数据，reducer是否正常工作？

例如进行测试：

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

        default: return state
    }
}

Answer 2

啊！我只看到铅。始终在输入值中添加当前输入的状态。示例：

isn

也许您不需要包含每个输入给减速器的字母来优化性能。

您可以执行以下操作：当前输入的数据处于状态，然后通过onClick按钮发送数据。仅当您希望立即获得每个键入字母的结果时，才使用onChange来化简

是否有更好的方法来更新复杂的接口，以使更改反映在视图中

2 个答案: