How to Access action creators names with auto-complete in a react component?

Question

I am using react and redux with typescript lately and it's awesome.

I can access my store state inside useAppSelector( as specified in react-redux official document ) with auto-complete option which speeds-up development time, but I can't access my action creators names with auto-complete inside my useAppDispatch hook.

The reason is I am using redux-thunk middleware in my App, so I have to use ThunkDispatch to type AppDispatch, which has an AnyAction type for action.

//react-redux document
import {ThunkDispatch} from 'redux-thunk';
import {AnyAction} from 'react-redux';

type RootState = ReturnType<typeof store.getState>;
type AppDispatch = ThunkDispatch<RootState, any, AnyAction>;
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Currently I export an object which contains all my action creators, and importing it inside any component gives me their names. like This:

// inside actions.ts
const AppActions = {
   action1: () => {},
   action2: () => {},
   ...
}

export default AppActions;


// inside index.tsx
import AppActions from 'actions.ts'

// here i can access them like 
AppActions.action1()

So is there a better way to do this ?

Answer 1

Hey there so maybe can you post your store ts file ? then

you will export AppDispatch = typeof store.dispatch;

then in your hooks for

export const useAppDispatch = () => useDispatch<AppDispatch>()

Then use it in your app like

const dispatch = useAppDispatch()
dispatch(YOU SHOULD SEE YOUR STORE ACTIONS OPTIONS)