Eunsim Kang
Eunsim Kang

Reputation: 35

How to structure data reducers in Redux-toolkit with multiple apis

I'm beginner developer developing an application with react using typescript and redux-toolkit (mainly with createSlice, createAsyncThunk). I'm still confused on how to structure/manage data with multiple data apis

for example :

there are 3 endpoints from domain.

/products,
/photos,
/info

I've created each slice according to the endpoint

productSlice, 
PhotoSlice, 
infoSlice

each slice has reducer, createAsyncThunk, extraReducers, then combined all reducers like below

const rootReducer = combineReducers({
     product: productSlice.reducer,
     photo: photoSlice.reducer,
     info: infoSlice.reducer
});

each slice has reducer, createAsyncThunk, extraReducers, then combined all reducers like below Actually I've spent a lot of time to find a right way of structuring data. then I've come across this code that other developer did like below

const rootReducer = combineReducers({
      getProduct: getProductSlice.reducer,
      createProduct: createProductSlice.reducer,
      updateProduct: updateProductSlice.reducer,
      deleteProduct: deleteProductSlice.reducer,
      getPhotoDetails: getPhotoDetailsSlice.reducer,
      updatePhotoDetails: updatePhotoDetailsSlice.reducer,
      deletePhotoDetails:  deletePhotoDetailsSlice.reducer,
      getInfo: getInfoSlice.reducer,
      createInfo: createInfoSlice.reducer,
      updateInfo: updateInfoSlice.reducer,
      deleteInfo: deleteInfoSlice.reducer,
});

I'm actually not sure (neither is he ) which way is better of structuring Reducers and data? or if you show me other way or examples of structuring reducer and data, It would be really nice.

Upvotes: -1

Views: 2441

Answers (1)

phry
phry

Reputation: 44186

Since the last version, Redux Toolkit ships with RTK Query, which would replace all those reducers with one auto-generated one. That might help you reduce your code quite a bit, give it a look.

Upvotes: 1

Related Questions