The Dynamic Trio: React, Redux Toolkit, and Redux Saga 🚀

Anuj Rajak — Tue, 27 Aug 2024 10:58:30 +0000

React, Redux Toolkit, and Redux Saga form a powerful trio for building complex, state-managed web applications. 🌟 In this post, we’ll explore how to integrate these technologies step-by-step, making your app efficient and maintainable.

Step 1: Setting Up Your React App 🎨

First, create a new React application using Create React App. Open your terminal and run:

npx create-react-app my-app
cd my-app

Step 2: Installing Redux Toolkit and Redux Saga 🗄️

Next, install Redux Toolkit and Redux Saga by running:

npm install @reduxjs/toolkit react-redux redux-saga

Step 3: Setting Up Redux Toolkit 📦

Create a new folder called store in the src directory, and inside it, create a file named store.js:

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer'; // Import your root reducer
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas'; // Import your root saga

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: rootReducer,
  middleware: [sagaMiddleware],
});

sagaMiddleware.run(rootSaga);

export default store;

Step 4: Creating Your Reducers 🌀

Create a counterSlice.js file in the store folder to define your counter reducer:

// src/store/counterSlice.js
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 5: Creating Your Root Reducer 🌀

In your rootReducer.js file, import the counter reducer:

// src/store/rootReducer.js
import { combineReducers } from 'redux';
import counterReducer from './counterSlice'; // Import your counter reducer

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

Step 6: Creating a Simple Saga 🕸️

Next, create a sagas.js file in the store folder. Here’s a simple saga that logs a message when the counter is incremented:

// src/store/sagas.js
import { takeEvery } from 'redux-saga/effects';
import { increment } from './counterSlice';

function* logIncrement() {
  console.log('Counter incremented!');
}

function* rootSaga() {
  yield takeEvery(increment.type, logIncrement);
}

export default rootSaga;

Step 7: Connecting Redux to Your React App 🔗

Now, connect Redux to your React application. Open your index.js file and wrap your App component with the Provider from react-redux:

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

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

Step 8: Creating a Simple Component with Redux 📲

Now, let’s create a simple component that uses Redux state. Create a file called Counter.js:

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

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

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

export default Counter;

Step 9: Adding Your Component to the App 🌈

Finally, add your Counter component to the App.js file:
javascript

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

const App = () => {
  return (
    <div>
      <h1>Welcome to My App!</h1>
      <Counter />
    </div>
  );
};

export default App;

Putting It All Together 🎉

By combining React, Redux Toolkit, and Redux Saga, you create a powerful application that handles complex state management seamlessly. 💪 React provides the UI, Redux Toolkit manages the state, and Redux Saga takes care of side effects.

🕹️ This integration results in a smooth and efficient user experience, making your app reliable and easy to maintain. 🎢
So, what are you waiting for? Start building your next amazing web app with React, Redux Toolkit, and Redux Saga today! 🚀

DEV Community: Anuj Rajak