Intro to Redux Toolkit: Simplifying State in React

Hello there! Have you ever felt a bit overwhelmed with managing state in your React applications? If so, you’re in the right place. Today, we’ll dive into Redux Toolkit, a powerful and efficient library designed to make managing state in React a breeze.

What is Redux Toolkit?

Redux Toolkit is the official, recommended way to write Redux logic. It simplifies the process of setting up and managing your Redux store, reducing the boilerplate code and making it easier to implement best practices right out of the box.

Why Use Redux Toolkit?

• Less Boilerplate: Automates setup and reduces repetitive code.
• Opinionated Configuration: Provides sensible defaults.
• Improve Performance: Uses Immer for efficient updates.

Setting Up Redux Toolkit

Install Redux Toolkit and React-Redux:

npm install @reduxjs/toolkit react-redux

Creating a Redux Store with Redux Toolkit

Step 1: Define a Slice

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

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;

Step 2: Configure the Store

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

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

export default store;

Step 3: Connect the Store to React

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

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

Using Redux State and Actions in React Components

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

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

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

export default Counter;

Breakdown

• useSelector: Reads state from the store.
• useDispatch: Sends actions to update state.

Conclusion and Next Steps

That’s a wrap! We’ve taken a tour of Redux Toolkit, simplified state management in React, and built a basic counter app.

Practice Ideas

• Expand the Counter: Add a reset button.
• User Auth: Add a slice for user login/logout.
• Todo List: Build a todo app using slices for tasks.

Feel free to share your creations or questions in the comments below. Practice makes perfect!

Happy coding, and see you next time on sagarkunwar.com.np!