Setting up Redux v5.0.0 with React

Demonstrate the initial setup process for Redux v5.0.0 in a React application including Redux Toolkit.

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

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
export const store = configureStore({ reducer: rootReducer });

This code snippet imports the 'configureStore' function from Redux Toolkit and creates a Redux store using the rootReducer (not shown), which you would have to combine from your individual reducers. The store is then exported for use in the React application.

import { Provider } from 'react-redux';
import { store } from './store';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

This code snippet sets up the Redux Provider, which makes the Redux store available to any nested components that need to access the Redux store. The Provider is wrapped around the main App component in the React application, and ReactDOM renders the entire application to the DOM.

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

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

This code snippet demonstrates how to create a slice of Redux state using Redux Toolkit's createSlice. A slice is a collection of reducer logic and actions for a single feature of your app. In this example, a counter slice is created, with actions for incrementing, decrementing, and incrementing by a specific amount.

import { counterSlice } from './features/counter/counterSlice';

// Assuming your rootReducer is structured using combineReducers
import { combineReducers } from 'redux';

export const rootReducer = combineReducers({
  counter: counterSlice.reducer
});

This code snippet shows how to combine the reducers from different slices to create the rootReducer. This rootReducer is then used to create the Redux store. Here, the counter slice's reducer is added to the rootReducer using combineReducers.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './features/counter/counterSlice';

export function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

This code snippet demonstrates how to use a Redux state value and dispatch actions in a React component using the useSelector and useDispatch hooks from 'react-redux'. It shows a Counter component that displays a count value from the Redux state and has a button to increment that count.