Redux Toolkit (RTK) integration with React

Redux Toolkit (RTK) integration with React

How to integrate Redux Toolkit (RTK) with React? Are you wanted to use Redux with features as React Query provides?

So now you can, by using the Redux Toolkit & its latest addition: RTK Query.

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

Here this article we demonstrate how to integrate Redux Toolkit(RTK) with React code examples.

RTK Query

RTK Query is an advanced client-side caching and data-fetching tool. This functionality is similar to React Query but it has the benefit of being directly integrated with Redux.

All developers typically use async middleware modules like Thunk when working with Redux API interaction.

Like this an approach limits flexibility; thus React developers now have an official alternative from the Redux team that covers all the advanced needs of today’s client or server communication.

IF you want then buy a good, reliable, secure WordPress web hosting service  from here: click here

Installation

So first, we need to create a project using the Create React App (CRA) template for use with TypeScript and Redux:

1. React Installation

npx create-react-app my-app

2. Redux toolkit installation

npm i redux react-redux @reduxjs/toolkit

Setup

Reducer setup

1. Create a folder and name it store inside src directory
2. Create a reducer file postsSlice.js inside store directory inside postsSlice.js file we write our reducer

import axios from "axios";
import { createSlice } from "@reduxjs/toolkit";

const INITIAL_STATE = {
  posts: [],
  error: null,
  loading: false,
};

const postsSlice = createSlice({
  name: "posts",
  initialState: INITIAL_STATE,
  reducers: {
    getPosts: (state) => {
      state.loading = true;
    },
    getPostsSuccess: (state, { payload }) => {
      state.loading = false;
      state.posts = payload;
      state.error = null;
    },
    getPostsFailure: (state, { payload }) => {
      state.loading = false;
      state.error = payload;
    },
  },
});

const { getPosts, getPostsSuccess, getPostsFailure } = postsSlice.actions;

export function fetchPosts() {
  return (dispatch) => {
    dispatch(getPosts());
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        dispatch(getPostsSuccess(res.data));
      })
      .catch((error) => {
        dispatch(getPostsFailure(error));
      });
  };
}

export const postsSelector = (state) => state.posts;
export default postsSlice.reducer;

Store setup

Setup redux store

1. Create index.js file inside store folder

import {configureStore} from '@reduxjs/toolkit';
import postsReducer from './postsSlice';

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

Configure App.js

Now we include store provider in App.js

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

import PostsPage from 'PostsPage';

export default function App() {
return (
<Provider store={store}>
<PostsPage />
</Provider>
);
}

Fetch posts

1. Create a file PostsPage.js inside src/pages directory

import React, { useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { postsSelector, fetchPosts } from "../store/postsSlice";

export default function PostsPage() {
const dispatch = useDispatch();
const { posts, error, loading } = useSelector(postsSelector);

const initialize = useCallback(() => {
dispatch(fetchPosts());
}, [dispatch]);

useEffect(() => initialize, [initialize]);

if (loading) {
return <div>Loading Posts</div>;
}

if (error) {
return <div>Error fetching posts.</div>;
}

return (
<div>
{posts.map((post) => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.body}</p>
<hr />
</div>
))}
</div>
);
}

If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.