ARTICLE AD BOX
I've been reading up on React/Redux documentation, specifically on setting up types for the main redux application store, and was wondering if there are any significant differences when it comes to the approach of inferring the RootState (and Dispatch) type.
Consider a simple store:
store.ts
import { configureStore } from '@reduxjs/toolkit' // ... const store = configureStore({ reducer: { posts: postsReducer, comments: commentsReducer, users: usersReducer, }, })Two approaches I have seen when inferring types for RootState and AppDispatch :
Approach A (as seen in the Redux docs)
// Get the type of our store variable export type AppStore = typeof store // Infer the `RootState` and `AppDispatch` types from the store itself export type RootState = ReturnType<AppStore['getState']> // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} export type AppDispatch = AppStore['dispatch']Approach B (as seen in the React-Redux docs, with my modification of adding the AppStore type for hooks)
export type AppStore = typeof store // This line is my own addition and not included in the React-Redux docs // Infer the `RootState` and `AppDispatch` types from the store itself export type RootState = ReturnType<typeof store.getState> // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} export type AppDispatch = typeof store.dispatchI believe Approach A is slightly more convenient if one were to refactor store to some other name, but other than that, I can't seem to discern any significant advantages of choosing one over the other.
Any additional thoughts or insights into this would be greatly appreciated!
