Question

使用下面的Typescript React Redux进行设置，在分派时，总是更新整个对象是常见/最佳实践

dispatch(saveSettings({...state, ...color: 'blue' }))

或SettingsInterface中的各个值

dispatch(saveSettings({color: 'blue' }))

对于更新个人值，动作创建者参数应如何接受SettingsInterface的一个或多个键

const saveSettings = (settings: SettingsInterface) =>... // action creator argument is currently expecting all from the SettingsInterface

设置

const SAVE_SETTINGS = "SAVE_SETTINGS"

export interface SettingsInterface {
   color: `red` | `blue`
   preference: string
   location: string
}

interface SaveSettingsInterface {
    type: typeof SAVE_SETTINGS
    settings: SettingsInterface
}

export type settingsActionTypes = SaveSettingsInterface

// action creator
export const saveSettings = (settings: SettingsInterface): settingsActionTypes => {
    return {
        type: SAVE_SETTINGS,
        settings
    }
}


//reducer
const settings = (state = settingsInitialState, action: settingsActionTypes): SettingsInterface => {
    switch (action.type) {
        case SAVE_SETTINGS_SUCCESS:
            return { ...state, ...action.settings }
        default:
            return state
       }
    }

最后，在我要更新“颜色”状态的onChange处理程序中；如何确保该值是SettingsInterface中指定的字符串文字并（“ red” |“ blue”）的颜色之一？

 // radio buttons onChangeHandler
 const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        let newColor = event.target.value
    
        dispatch(saveSettings({ color: newColor }))
    
    }

Answer 1

我正在使用手机，因此请原谅我的格式错误。

第一个问题：您应该在一次操作中传递最少的信息量。因此，只需更改属性即可。归约器的工作是将更改与现有状态合并。所以使用这个：

dispatch(saveSettings({color: 'blue' }))

要传递不完整的对象，请使用打字稿实用程序类型Partial。

const saveSettings = (settings: Partial<SettingsInterface>)

您可以通过使用

来获得可接受的颜色值的并集

type Color = SettingsInterface[‘color’]

但是event.target.value将始终只是一个字符串，因此您必须使用“ as”来断言它是更具体的Color类型。

dispatch(saveSettings({ color: newColor as Color }))

如何使用一个或多个reducer状态值更新Typescript React Redux状态

1 个答案: