Я думаю, что мне что-то не хватает в отношении инструментов Redux и RTK Query. Я также использую для этого RTK Query OpenAPI codegen.
Прямо сейчас у меня есть API, который выглядит так -›
export const api = generatedApi.enhanceEndpoints({
endpoints: {
getMaterials: {
transformResponse: response => normalize(response),
},
},
})
Это возвращает мне нормализованные данные в моем компоненте:
const Materials = () => {
const { data, isLoading, error } = useGetMaterialsQuery()
/*
Cool this gives me data back like:
{
[id]: {
id,
prop1: 'blah',
prop2: 'blah2'
}
}
*/
console.log(data)
// but now I want to structure this data differently using selector
const newDataStructure = useSelector(addSomeMetaDataAndStructureDifferentlySelector)
return <MyComponent structuredData={newDataStructure} />
}
Но когда я смотрю на состояние в этом селекторе, это выглядит так:
Когда в селекторе я действительно хочу использовать что-то вроде -›
const addSomeMetaDataAndStructureDifferentlySelector = state =>
// create new data structure from state.materials.byId that I will pass to `MyComponent`
Мой магазин сейчас выглядит вот так -›
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from 'gen/rtk-openapi'
// import materialsReducer from 'state/materials/materialsSlice'
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(api.middleware),
})
setupListeners(store.dispatch)
export default store
Итак, мне нужно передать data
непосредственно из useGetMaterialsQuery
в функцию и просто преобразовать ее?
Или я могу каким-то образом создать новый фрагмент редуктора, который каким-то образом правильно инициализирует данные, чтобы я мог получить доступ к state.materials.byId
в селекторе?
Или я что-то принципиально упускаю здесь?