react-redux - 是否有更好的方法来更新复杂的界面，以便更改反映在视图中

问题描述

在商店中更新复杂界面后，如何将其更新为视图中的道具？

在以下情况下，我试图在减速器中进行验证。根据验证，我必须更新标签和错误消息。虽然商店正在更新，但我t see the update in the view. Also, when I type in, I can在屏幕上看不到文字，尽管它们已发送到商店？

注册表格.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>
        )

    }

动作.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

减速器.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
    }

  };

注册容器

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)

索引.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,    
})

标签： react-redux

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

react-redux - 是否有更好的方法来更新复杂的界面，以便更改反映在视图中

问题描述

解决方案

推荐阅读