Redux Toolkit - Need Example Using Reselect or Similar with TypeScript

[ghost]

Bug Report

When building frontend storage with Redux Toolkit, one way to prevent state loss is to use the library 'reselect'. When using TypeScript, I noticed a lot of missing features for this ecosystem.

Please provide an example of Redux Toolkit with extra reducers for API calls that uses TypeScript, along with selectors for state objects using TypeScript.

There are a lot of variations posted on GitHub that are not functional when tested.

Preferred frontend is React.

🔎 Search Terms

TypeScript
Redux Toolkit
API calls
Selectors

🕗 Version & Regression Information

Please keep and fill in the line that best applies:

This is the behavior in every version I tried, and I reviewed the FAQ for entries about Redux Toolkit.
⏯ Playground Link

No Playground.

💻 Code

No code- requesting a code example from scratch.

🙁 Actual behavior

Tried to use TypeScript in Redux Toolkit along with the library Reselect. Errors prevented the selectors and extra reducers.

🙂 Expected behavior

Building in JavaScript delivers built-in error handling and loading status for API calls and selectors for each state object that do not lose state from asynchronous activities.

[markerikson]

@secretLabHQ389 : I'm not sure what you're asking for, tbh.

What are you actually trying to accomplish? What does your own app code look like? What specific problems are you having? What features are "missing"?

[ghost]

Hello markerikson,

I appreciate your time and interest. I am passionate about Redux and its integrations with React.

I created this skeletal React/Redux application example to run in your localhost in my spare time: https://github.com/secretLabHQ389/react18-travel-app/blob/main/src/store/propertySlice.js

	createAsyncThunk, 
	createSlice
} from '@reduxjs/toolkit'
import {createSelector} from 'reselect'
import {getUsers} from '../apis/properties'

const PropertiesInitialState = {
	loading: false,
	properties: ['No properties found.'],
    selectedProperty: 'Welcome! Pick a Category to Begin!'
}

export const getUsersHandler = createAsyncThunk(
    'properties/getUsers',
    async (
        
      ) => {
          const users = await getUsers()
		  //This works fine:
		  console.log('users: ', users.data)
          return users
  })

//reducer:
const propertySlice = createSlice({
    name: 'properties',
    initialState: PropertiesInitialState,
    reducers: {
        setCurrentPropertyReducer: (state, payload) => {
			state.selectedProperty = payload.payload
		}
    },
    extraReducers: {
        [getUsers.pending](state) {
			state.loading = true
		},

		[getUsers.fulfilled](state, {payload}) {
			state.loading = false
			console.log('payload: ', payload)
		},

		[getUsers.rejected](state) {
			state.loading = false
		}
    }
})

//plain action creators:
export const setCurrentProperty = currentProperty => dispatch => {
	dispatch(setCurrentPropertyReducer(currentProperty))
}

//store selectors:
export const selectProperties = (state) => state.properties

export const propertiesSelector = createSelector(
	[selectProperties],
	state => state.properties
)

export const selectedPropertySelector = createSelector(
	[selectProperties],
	state => state.selectedProperty
)

export const {
	setCurrentPropertyReducer
} = propertySlice.actions

//store export:
export default propertySlice.reducer

QUESTIONS:

1. Even though my compiled slice structure from a couple years ago has a certain charm of its own with its compartmentalised scope, it is NOT typed or serialised, which is now breaking the extra reducers. Has it been phased out for this (https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk)?
2. Second question- moving on, is the below example in the documentation considered typed or allowed for TypeScript? I can't find an example for converting it:

  name: 'users',
  initialState: {
    entities: {},
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(updateUser.fulfilled, (state, { payload }) => {
      state.entities[payload.id] = payload
    })
    builder.addCase(updateUser.rejected, (state, action) => {
      if (action.payload) {
        // Since we passed in `MyKnownError` to `rejectValue` in `updateUser`, the type information will be available here.
        state.error = action.payload.errorMessage
      } else {
        state.error = action.error
      }
    })
  },
})

[phryneas]

The below example is fully typed. All the type information here is part of updateUser, so all the resulting types of payload etc. can automatically be derived from that. You don't need to write manual type annotations for TypeScript to work correctly here.