React-Redux with TypeScript

redux.ts

import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { useSelector, useDispatch } from 'react-redux';

export const mySlice = createSlice({
  name: 'MyItem',
  initialState: { field1: 'hello, world', field2: 0 },
  reducers: {
    setField: (state: { field1: string; field2: number }, action: PayloadAction<string>) => {
      state.field1 = action.payload;
    },
  },
});

export const store = configureStore({
  reducer: {
    myItem: mySlice.reducer,
  },
});

export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;

// For some reason we need to use this pattern since `dispatch(mySlice.actions.setField)` doesn't work.
const {setField} = mySlice.actions
useAppDispatch(setField('newValue'))