Introduction
-
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manages the state of those components efficiently. Redux, on the other hand, is a state management library for JavaScript applications, which can be used with any UI framework or library. It provides a predictable state container for managing the data in an application.
-
Together, React and Redux form a powerful combination for building scalable, maintainable, and efficient web applications. React provides a simple and intuitive way to build UI components, while Redux provides a centralized and predictable way to manage the application state. By using these two libraries together, developers can create complex applications that are easy to reason about and maintain.
-
There a lot of way to setup and use redux in your reactjs project. But today i’ll share with you the way i prefer using vite, typescript and redux and why i recommend you to use that. In this tutorial, I assume that you know the basic of react, redux and knew to use redux in reactjs project. I just focus on how we setup and organize our project’s folder structure. So let’s start.
Redux and core concepts
The core components of Redux are:
- Store: A centralized container that holds the application state. Reducer: A pure function that takes the current state and an action as input, and returns the new state.
- Action: An object that describes a change to the state. It includes a type property that specifies the type of action being performed and a payload property that contains any data associated with the action.
- Middleware: A function that intercepts and processes actions before they reach the reducer. It can be used for logging, error handling, and other cross-cutting concerns.
In reactJs, Redux usually use when you need a global state that can be access across all components in your app. Such as the information about logged-in user,…etc.
Let’s code
- First, let’s create a reactjs project using vite and typescript
yarn create vitebash- Install dependencies. We install
@reduxjs/toolkitwhich is a package that provides abstractions and utilities on top of Redux to simplify the development process and improve performance. And of course react-redux for using redux in react project
yarn add @reduxjs/toolkit react-reduxbash- For this demo project we’ll save user state using Redux. Our project structure will looks like
src
│ main.tsx
│ App.tsx
│
└───state
│ │ index.ts
│ └───user
│ │ reducer.ts
│ │ hooks.ts
│ │ index.ts
│
└───components
│ Home.tsx
│ ...tree- Create the state folder under src folder as the diagram below. Now let’s config the user slice in user folder
- Define the user slice and its reducer functions:
//src/user/reducer.ts
import { createSlice } from "@reduxjs/toolkit";
export type UserStateType = {
name: string;
address: string;
role: string;
}
const initialState: UserStateType = {
address: "",
name: "",
role: "",
}
const userSlice = createSlice({
initialState,
name: "user",
reducers: {
setUser: (state, action) => {
return action.payload
},
}
})
const { actions, reducer } = userSlice;
export const {
setUser
} = actions
export default reducer;reducer.ts- Here, we create a user slice with 3 properties name, address, role. And create a reducer for setUser
- Next step, we’ll create hooks to manipulate with this state. Copy this code in your src/state/user/hook.ts file
// src/state/user/hook.ts
import { useDispatch, useSelector } from "react-redux"
import { AppState } from "../index"
import { useCallback } from "react"
import { UserStateType, setUser } from "./reducer";
export const useUser = () => {
const user = useSelector((state: AppState) => state.user)
const dispatch = useDispatch()
const onSetUser = useCallback((user: UserStateType) => {
dispatch(setUser(user))
}, [dispatch])
return {
user,
onSetUser
}
}
hook.ts- In this file, we create a custom hook called useUser which return a current user state by calling the useSelector hook and also return a function to update this state: onSetUser
- Finally, we export all hooks and reducer of user slice in src/state/user/index.ts
import userReducer from "./reducer"
export * from "./hook"
export default userReducerindex.ts- Then we config our redux store in src/state/index.ts for using the user slice that we’ve set up
import { configureStore } from "@reduxjs/toolkit"
import userReducer from "./user"
const rootReducer = {
user: userReducer,
//add more reducer later below
}
const store = configureStore({
reducer: rootReducer,
devTools: true,
})
export default store
export type AppState = ReturnType<typeof store.getState>index.ts- Tadaaaa!, now you’ve set up successfully a user state save in redux now let’s see how we use it in our component
- First, setup redux provider in your root component. Here, i set it up in main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./state";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);main.tsx- When everything is set up. You can access the state in the redux using the hooks that we’ve created. Like this example below, I create a component that have a button to update the user state by using the onSetUser function. It also show the current user state by using the user value return from the useUser hook
import React from "react";
import { useUser } from "./state/user/hook";
function App() {
const { user, onSetUser } = useUser();
const updateUser = () => {
onSetUser({
name: "John Doe",
address: "123 Main St",
role: "admin",
});
};
return (
<div>
<h1>React Redux TS</h1>
<h2>current user state in redux: {JSON.stringify(user)}</h2>
<br />
<button onClick={updateUser}>Update User</button>
</div>
);
}
export default App;App.tsx- If you follow to this step you can type yarn dev in your terminal for the result:
- For other slice you want to add to your redux state just repeat these steps below. That’s it!! Quite neet, right? If you want the code i leave the github repo here. Leave it a star if you like this blog <3. https://github.com/lilhuy0405/react-redux-template
Conclusion
- I’ve shared with you how i normally setup redux in my reactjs project. There are many way out there you can chose to setup redux in your project. Using my method maybe complicate because to create a single state you need to set up a folder with 3 files for hooks reducers then exports all of these in the index file. But with the astraction power of hooks it make code in the component much more easily to read and maintaince. So what do you thing ? Leave the comment below.