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

Asked
Active3 hr before
Viewed126 times

4 Answers

structurereducersreduxtoolkitmultiple
90%

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,Connect and share knowledge within a single location that is structured and easy to search., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Join Stack Overflow to learn, share knowledge, and build your career.

there are 3 endpoints from domain.

/products, /
photos,
/info
load more v
88%

In addition, configureStore adds some middleware by default, each with a specific goal:,The Redux Toolkit configureStore function automatically sets up the thunk middleware by default, so you can immediately start writing thunks as part of your application code.,redux-saga, which uses generator functions that return descriptions of behavior so they can be executed by the middleware,The "mutative" code only works correctly inside of our createReducer function

import {
   applyMiddleware,
   createStore
} from 'redux'
import {
   composeWithDevTools
} from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureStore(preloadedState) {
   const middlewares = [loggerMiddleware, thunkMiddleware]
   const middlewareEnhancer = applyMiddleware(...middlewares)
   const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
   const composedEnhancers = composeWithDevTools(...enhancers)
   const store = createStore(rootReducer, preloadedState, composedEnhancers)
   if (process.env.NODE_ENV !== 'production' && module.hot) {
      module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
   }
   return store
}
load more v
72%

Redux Toolkit has a createSlice API that will help us simplify our Redux reducer logic and actions. createSlice does several important things for us:,How to simplify your Redux logic using Redux Toolkit,The createStore API creates a Redux store with a root reducer function,That's why Redux Toolkit's createSlice function lets you write immutable updates an easier way!

npm install @reduxjs / toolkit
load more v
65%

Update our slice with two new reducers that are gonna control state for loading and errors. We just don't need to create endLoading reducer because as you can see we end loading in each reducer.,We prepared basic configuration of our slice but we want to get data to display. We're gonna use JSONPlaceholder - fake online REST API. Let's add Axios to our app.,We have made basic Redux configuration with Redux Toolkit. But what is the most important benefit of using Toolkit? Definitely, it's createSlice function that you will probably use for most application you're developing.,Now let's add actions. To keep it clear and simply add it in our slice's file. We don't have to write them individually in separate file anymore. We can export all the actions. the reducer, the asynchronous thunk and selector that gives us access to state from any component without using connect.

Firstly let's create file src/store/users.js and create our slice:

import {
   createSlice
} from '@reduxjs/toolkit'

// Slice

const slice = createSlice({
   name: 'users',
   initialState: {
      users: []
   },
   reducers: {
      getUsers: (state, action) => {
         state.users = action.payload;
      },
   },
});

export default slice.reducer
load more v