Upgrading to React-Redux 9 and Redux v5.0.0

Outline the steps to upgrade an existing app to use the latest React-Redux 9 and Redux v5.0.0, highlighting any common migration issues.

npm install react-redux@9 redux@5.0.0

This command updates `react-redux` to version 9 and `redux` to version 5.0.0 in your npm project.

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

const store = configureStore({ reducer: rootReducer });

Updating the store setup using `configureStore` from Redux Toolkit, which is the recommended approach as of Redux 5.0.0.

import { Provider } from 'react-redux';
// ... your other imports

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Wrapping your App component with the Provider from react-redux to pass the Redux store down to the components.

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

// Inside your component
const dispatch = useDispatch();
const someData = useSelector(state => state.someData);

// Use dispatch to send actions

Using the hooks useSelector and useDispatch in your components to access and modify the Redux state.

store.subscribe(() => console.log(store.getState()));

Example for subscribing to store updates. This could be changed or removed entirely in favor of useSelector hook with React-Redux 9.

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

const increment = createAction('increment');
const decrement = createAction('decrement');

const counterReducer = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
});

Creating actions and a reducer with Redux Toolkit's createAction and createReducer helpers, which simplifies the process and reduces boilerplate code.