Building a Simple Counter with React and Redux Toolkit: A Step-by-Step Guide

Dive into the world of modern web development by building a straightforward counter application using React and Redux Toolkit. This example will guide you through the essentials: setting up a Redux store, incorporating a slice for counter functionality, and utilizing this state within a React component.

Step 1: Project Setup

Begin by ensuring you have a React environment ready. If not, you can swiftly set one up using Create React App:

npx create-react-app redux-counter-example
cd redux-counter-example

Once your project environment is ready, install Redux Toolkit and React-Redux for state management:

npm install @reduxjs/toolkit react-redux

Step 2: Crafting the Redux Store and Counter Slice

Create the Store:

In your project's src directory, initiate a store.js file:

// src/store.js
import { configureStore } from '@reduxjs/toolkit';

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

Add a Counter Slice:

Next, develop a counter slice by creating a counterSlice.js file in the same directory:

// src/counterSlice.js
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; }
  },
});

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

Integrate the counter reducer into your store configuration in store.js:

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: { counter: counterReducer },
});

Step 3: Integrating the Redux Store with Your App

Update src/index.js to wrap your React app with the Redux Provider, making the store accessible throughout:

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

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

Step 4: Building the Counter Component

Construct a Counter.js component within the src directory to interface with the Redux store:

// src/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

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

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

Step 5: Incorporating the Counter Component in the Application

In src/App.js, include the Counter component to bring your app to life:

// src/App.js
import React from 'react';
import './App.css';
import { Counter } from './Counter';

function App() {
  return (
    <div className="App">
      <header className="App-header"><Counter /></header>
    </div>
  );
}

export default App;

Running Your App

Everything is set! Start your app and see the counter in action:

npm start

This app exemplifies how Redux Toolkit simplifies state management in React applications, showcasing a neat way to increment and decrement a counter's value. The React components smoothly interact with the Redux state, making the counter app both functional and educational.

Explore the full code on GitHub at icpmtech/react-redux-tutorial for more insights and detailed implementation.