Creating the Redux store

React is a popular JavaScript library for building user interfaces. One of the key concepts in React is the concept of state, which represents the current state of a component and can be changed over time. State is often used to store data and manage user interactions, such as form input, button clicks, and other events.

Redux is a state management library that can be used with React and other JavaScript frameworks. It provides a centralized store for application state and allows developers to manage state changes in a predictable and consistent way. Redux is particularly useful for managing complex state, such as data that is shared between multiple components or data that needs to be persisted across different pages or sessions.

Redux Toolkit Query is a package that extends Redux Toolkit and provides a set of tools for fetching and caching data from APIs. It simplifies the process of building data-driven applications by handling common tasks such as data fetching, caching, and error handling. With Redux Toolkit Query, developers can easily manage data in their applications, without having to write complex data fetching code from scratch. Overall, these three tools can work together to help developers build complex, data-driven applications with ease.

Setup

To setup RTK Query, start by adding the following to the package.json file:

"dependencies": {
    "@reduxjs/toolkit": "^1.9.3",
    "react-redux": "^8.0.5",
  },

Then run yarn install to install those dependencies.

Now create a file named app\javascript\store\store.ts with the following content:

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

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

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Then create a file named app\javascript\store\reduxHooks.ts with the following content:

import type { TypedUseSelectorHook } from 'react-redux';
import type { RootState, AppDispatch } from './store';

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Provide a State to the application

To provide the store throughout the React application, we will have to wrap our <App /> component with a redux provider. Change the app\javascript\App\index.tsx file to become like:

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

document.addEventListener('DOMContentLoaded', () => {
  const rootEl = document.getElementById('root');
  const root = ReactDOM.createRoot(rootEl!);
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  );
});

Quick start with RTK:

We will provide a React State Slice using the tutorial in: https://redux-toolkit.js.org/tutorials/typescript#define-slice-state-and-action-types

Quick start with RTK Query: