Updating Redux imports for v5.0.0

Showcase the changes in how Redux is imported in version 5, aligning with updated exports and ensuring compatibility.

import { createStore, applyMiddleware } from '@reduxjs/toolkit';

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(reducer, applyMiddleware(...middleware));

This code demonstrates how to import the createStore and applyMiddleware functions from @reduxjs/toolkit in Redux version 5.0.0, which is the standard way to create a Redux store and apply middleware to it.

import { combineReducers } from '@reduxjs/toolkit';

// Combine several reducers into a single reducing function.
const rootReducer = combineReducers({
  reducerA,
  reducerB
  // ... other reducers
});

Here we import the combineReducers function from @reduxjs/toolkit, and use it to combine multiple reducer functions into a single root reducer.

import { Provider } from 'react-redux';

// The <Provider /> makes the Redux store available to any nested components that need to access the Redux store.
<Provider store={store}>
  <App />
</Provider>;

In this snippet, the Provider component is imported from react-redux, which is used in a React application to wrap the top-level component, making the Redux store available to all connect() calls in the component hierarchy.

import { useSelector, useDispatch } from 'react-redux';

// Use `useSelector` to select values from the Redux store's state.
// Use `useDispatch` to return a reference to the store's `dispatch` function.
const value = useSelector(selectValue);
const dispatch = useDispatch();

In this example, useSelector and useDispatch hooks are imported from react-redux. useSelector allows you to extract data from the Redux store's state, while useDispatch gives you the dispatch function to send actions to the store.

import { createAction, createReducer } from '@reduxjs/toolkit';

// Create an action with `createAction` and a reducer with `createReducer`
const increment = createAction('increment');
const reducer = createReducer(initialState, {
  [increment]: (state, action) => state + 1
});

The last snippet showcases how to use createAction to define a new action and createReducer to create a reducer function that handles the action, both imported from @reduxjs/toolkit.