Redux Toolkit
Redux Toolkit exports several individual functions that you can use in your application, and adds dependencies on some other packages that are commonly used with Redux (like Reselect and Redux-Thunk). This lets you decide how to use these in your own application, whether it be a brand new project or updating a large existing app.
Store Setup
Every Redux app needs to configure and create a Redux store. This usually involves several steps:
•
- Importing or creating the root reducer function -Setting up middleware, likely including at least one middleware to handle asynchronous logic
- Configuring the redux dev Extension.
- Possibly altering some of the logic based on whether the application is being built for development or production
Store Setup With ConfigureStore
- Having an options object with "named" parameters, which can be easier to read
Enabling the Redux DevTools Extension automatically
In addition configureStore adds some middleware by default, each with a specific goal:Redux Thunk is the most commonly used middleware for working with both synchronous and async logic outside of components
In development, middleware that check for common mistakes like mutating the state or using non-serializable values.
Creating Slice of state
Redux state is typically organized into "slices", defined by the reducers that are passed to combineReducer:
`Import {combine}
import { combineReducers } from 'redux'
import usersReducer from '
import postsReducer from '
const rootReducer = combineReducers({
users: usersReducer,
posts: postsReducer,
})`
Top comments (0)