I have a use contextAPI that seems not working due incompatibility between the InitialState and the AppState. My guess is that something is wrong with [Field.INPUT] and [Field.OUTPUT]

The initial state:

const initialState = { 
  wallet: true, 
  error: '', 
  mod: false,
  independentField: Field.INPUT,
  typedValue: "",
  [Field.INPUT]: {
     //ADDRESS FOR GOERLI WETH
     currencyId: "0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6",
  },
  [Field.OUTPUT]: {
    currencyId: '',
  },
  INPUTVALUE: "",
  OUTPUTVALUE: "",
  pairDataById: {},
  derivedPairDataById: {},
  recipient: undefined,
};

The reducer function:

function reducer(state: AppState, action: ACTIONTYPE) {
  switch (action.type) {
    case "OPEN_WALLET":
      return { 
              wallet: action.payload, 
               error: state.error, 
               mod: state.mod,
               independentFiel: state.independentField,
               typedValue: state.typedValue,
               [Field.INPUT]: { currencyId: state[Field.INPUT].currencyId },
               [Field.OUTPUT]: { currencyId: state[Field.OUTPUT].currencyId },
               INPUTVALUE: state.INPUTVALUE,
               OUTPUTVALUE: state.OUTPUTVALUE,
               pairDataById: state.pairDataById,
               derivedPairDataById: state.pairDataById,
               recipient: state.recipient 

             };
    case "SET_ERROR":
      return { 
            wallet: state.wallet, 
            error: action.payload, 
            mod: state.mod,
            independentFiel: state.independentField,
            typedValue: state.typedValue,
            [Field.INPUT]: { currencyId: state[Field.INPUT].currencyId },
            [Field.OUTPUT]: { currencyId: state[Field.OUTPUT].currencyId },
            INPUTVALUE: state.INPUTVALUE,
            OUTPUTVALUE: state.OUTPUTVALUE,
            pairDataById: state.pairDataById,
            derivedPairDataById: state.pairDataById,
            recipient: state.recipient 
          }
    case 'TOGGLE_MOD':
      return { 
               wallet: state.wallet, 
               error: state.error, 
               mod: action.payload,
               independentFiel: state.independentField,
               typedValue: state.typedValue,
               [Field.INPUT]: { currencyId: state[Field.INPUT].currencyId },
               [Field.OUTPUT]: { currencyId: state[Field.OUTPUT].currencyId },
               INPUTVALUE: state.INPUTVALUE,
               OUTPUTVALUE: state.OUTPUTVALUE,
               pairDataById: state.pairDataById,
               derivedPairDataById: state.pairDataById,
               recipient: state.recipient 
            }
    default:
      return state
  }
}

The app provider:

const AppContext = createContext<{
  state: AppState
  dispatch: React.Dispatch<ACTIONTYPE>;
}>({state: initialState, dispatch: () => {} })

export function AppProvider(props: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {props.children}
    </AppContext.Provider>
  );
}

The error:

No overload matches this call.
  Overload 1 of 5, '(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', gave the following error.
    Argument of type '(state: { wallet: boolean; error: string; mod: boolean; independentField: Field; typedValue: string; INPUT: { currencyId: string; }; OUTPUT: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }, action: ACTIONTYPE) => { ...; } | { ...; }' is not assignable to parameter of type 'ReducerWithoutAction<any>'.
  Overload 2 of 5, '(reducer: (state: { wallet: boolean; error: string; mod: boolean; independentField: Field; typedValue: string; INPUT: { currencyId: string; }; OUTPUT: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }, action: ACTIONTYPE) => { ...; } | { ...; }, initialState: never, initializer?: undefined): [...]', gave the following error.
    Argument of type '{ wallet: boolean; error: string; mod: boolean; independentField: Field; typedValue: string; INPUT: { currencyId: string; }; OUTPUT: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }' is not assignable to parameter of type 'never'.

Can someone give me a hint on where i'm messing things?

CodePudding user response：

If you add the correct return type to reducer you get a much better error:

function reducer(state: AppState, action: ACTIONTYPE): AppState {
//                                                     ^ added this

Which errors here:

independentFiel: state.independentField,

With:

Type
  '{ wallet: boolean; error: string; mod: boolean; independentFiel: Field; typedValue: string; 0: { currencyId: string; }; 1: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }'
is not assignable to type
  '{ wallet: boolean; error: string; mod: boolean; independentField: Field; typedValue: string; 0: { currencyId: string; }; 1: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }'.
Object literal may only specify known properties, but
  'independentFiel'
does not exist in type
  '{ wallet: boolean; error: string; mod: boolean; independentField: Field; typedValue: string; 0: { currencyId: string; }; 1: { currencyId: string; }; INPUTVALUE: string; OUTPUTVALUE: string; pairDataById: {}; derivedPairDataById: {}; recipient: undefined; }'.

Did you mean to write 'independentField'?(2322)

This lets the compiler derive a much nicer error for your because it knows what's expected in a more specific way.

The compiler even offers you the answer at the end there.

See Playground

Fix the property name and the errors are resolved:

independentField: state.independentField,

See fixed playground