如何在Reducer中使用react动态设置state和initialState的类型？

Question

I have different types of response which I don't know exactly type is ,is that any way to change response type base on dispatch in component

 export interface State { loading: boolean; response: FilteredDataType | Response | string | number,...'I dont know type' ???? error?: string; } export type Actions = | { type: 'SET_LOADING '; payload: boolean } | { type: 'SET_SUCCESS_SELECTED'; payload: Response } | { type: 'SET_SUCCESS'; payload: FilteredDataType } | { type: 'SET_FAILURE'; payload: string } export const initialState: State = { loading: false, response: ????, error: '', } export function reducer(prevState: State, action: Actions): State { switch (action.type) { case 'SET_LOADING ': return { ...prevState, loading: action.payload } case 'SET_SUCCESS': return { ...prevState, response: action.payload, loading: false } case 'SET_SUCCESS_SELECTED': return { ...prevState, response: action.payload, loading: false } case 'SET_FAILURE': return { ...prevState, loading: false, error: action.payload } default: return initialState } } const Selected: React.FunctionComponent<PropsType> = ({ date, from }) => { const { state: { session } } = useContext(SessionContext) const { selectedSpid } = useInfoState() const [state, dispatch] = useReducer(reducer, initialState); const load = useCallback(async () => { dispatch({ type: 'SET_LOADING ', payload: false }) try { if (date && date.length) { const response = await getData(date, date) const responseApi: DataResponse = response.data dispatch({ type: 'SET_SUCCESS_SELECTED', payload: responseApi }) dispatch({ type: 'SET_LOADING ', payload: true }) } } catch (e) { return dispatch({ type: 'SET_FAILURE', payload: e.Tostring() }) } }, []) useEffect(() => { if (session && selectedSpid) { load() } }, [date, from]) return ( <Spin spinning={!selectedSpid}> <Row> // Map has Error becuse of type {state.response && state.response.map((item) => <SelectedCard key={item.id} {...item} icon={true} /> )} </Row> </Spin> ) } export default Selected

 const Selected: React.FunctionComponent<PropsType> = ({ date, from }) => { const { state: { session } } = useContext(SessionContext) const { selectedSpid } = useInfoState() const [state, dispatch] = useReducer(reducer, initialState); const load = useCallback(async () => { dispatch({ type: 'SET_LOADING ', payload: false }) try { if (date && date.length) { const response = await getData(date, date) const responseApi: DataResponse = response.data dispatch({ type: 'SET_SUCCESS_SELECTED', payload: responseApi }) dispatch({ type: 'SET_LOADING ', payload: true }) } } catch (e) { return dispatch({ type: 'SET_FAILURE', payload: e.Tostring() }) } }, []) useEffect(() => { if (session && selectedSpid) { load() } }, [date, from]) return ( <Spin spinning={!selectedSpid}> <Row> // Map has Error becuse of type {state.response && state.response.map((item) => <SelectedCard key={item.id} {...item} icon={true} /> )} </Row> </Spin> ) } export default Selected

I am going to dispatch type of request base on a different type of request, I am going to know is that any way to change dynamically state base on the request?

is any one help me?

Answer 1

Based on your code sample, and where you put I don't know what type ; it sounds like you're trying to have the State.response type to be a union type of all possible payloads that an action might have. You can do this with a lookup type, as shown below.

export interface State {
    loading: boolean;
    response?: Actions["payload"];
    error?: string;
}

export type Actions =
    | { type: 'SET_LOADING '; payload: boolean }
    | { type: 'SET_SUCCESS_SELECTED'; payload: Response }
    | { type: 'SET_SUCCESS'; payload: FilteredDataType }
    | { type: 'SET_FAILURE'; payload: string }

export const initialState: State = {
    loading: false,
}

But you also said ...is that any way to change response type base on dispatch in component . Which sounds a bit like you don't want to have the Actions type at all. The actions type cannot be inferred from the usage of dispatch() so the only way to do that would be to have your useReducer take an any type for a second parameter. Then you would lose all the advantages of typescript in your reducer, which I really wouldn't recommend.

Answer 2

I mean if you truly have no idea what the response will contain you can just use any , or if you know it will be some kind of object you can create a generic object type that will allow it to have anything as a key:

type GenericObject = { [key: string]: any }

If it's just a certain number of potential types, you could create separate ones and use union types like you're already doing:

type ResponseA = { something: string }
type ResponseB = { somethingElse: string }

...

export interface State {
    loading: boolean;
    response: ResponseA | ResponseB;
    error?: string;
}

You can't change the type of something in response to an action that occurs. TypeScript's type checking only occurs at compile time to enforce type safety during development. At runtime, all of the TypeScript is removed and compiled into regular JavaScript that can run in a browser/on a server. As long as the types you're using aren't throwing errors and are enforcing type safety to the level you need,