ReactJS with Redux and TypeScript
Frontend React.js Redux

Mastering ReactJS with Redux and TypeScript: A Step-by-Step Guide

Boris Civcic

Setting up ReactJS with Redux and TypeScript can provide a strong foundation for building scalable and maintainable web applications. In this guide, we’ll walk through the steps to create a new React project, configure Redux for state management, and integrate TypeScript for type safety.

Step 1: Create a New React Project

First, ensure you have Node.js installed on your machine. Then, create a new React project using Create React App with the TypeScript template. This will set up a project with ReactJS and TypeScript configured from the start.

npx create-react-app my-app --template typescript
cd my-app

Step 2: Install Redux and Related Packages

Next, you’ll need to install Redux, React-Redux (to connect Redux with React), and Redux Toolkit (to simplify Redux logic). Additionally, install their TypeScript type definitions to ensure everything works seamlessly with TypeScript.

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

Step 3: Set Up Redux Toolkit

Create a folder structure for your Redux logic. A common structure is to have a store directory with slices (reducers) inside it. This organization helps maintain clarity and separation of concerns in your codebase.

mkdir src/store

Create a Slice

A slice contains the reducer logic and actions for a specific piece of your state. Create a slice file:

// src/store/counterSlice.ts

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

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

Configure the Store

Now, configure the Redux store to use the created slice.

// src/store/store.ts

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

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

Step 4: Integrate Redux with React

To make the Redux store available throughout your ReactJS application, use the Provider component from react-redux. This step is crucial for connecting your Redux state with your React components.

// src/index.tsx

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

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

Step 5: Use Redux State and Actions in Components

Create a component that uses the Redux state and dispatches actions. For this example, we’ll create a simple counter component. This demonstrates how to interact with Redux state in your ReactJS application using TypeScript.

// src/components/Counter.tsx

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

const Counter: React.FC = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

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

export default Counter;

Step 6: Add the Counter Component to the App

Finally, add your new Counter component to the main App component. This step completes the integration of Redux state management into your ReactJS application.

// src/App.tsx

import React from 'react';
import './App.css';
import Counter from './components/Counter';

const App: React.FC = () => {
  return (
    <div className="App">
      <Counter />
    </div>
  );
};

export default App;

Conclusion

You now have a React application set up with Redux for state management and TypeScript for type safety. This setup with ReactJS, Redux, and TypeScript provides a robust structure for building complex applications with predictable state management and enhanced development experience thanks to TypeScript’s static typing.

Feel free to expand on this setup by adding more slices, actions, and components as your application grows. Happy coding with ReactJS, Redux, and TypeScript!

Additional Resources

By following this guide, you’ve learned how to set up ReactJS with Redux and TypeScript, ensuring your application is both scalable and maintainable. The added external links provide further reading and help improve your SEO through DoFollow links. Happy coding!