Scribd
Upload
40 views

Practice - ReactJs (Redux)

The document discusses how to implement Redux in a React application. It covers creating a Redux slice and store, connecting the store to React with react-redux, and using Redux hooks like useSelector and useDispatch in components. It also shows how to make asynchronous API calls using Redux Toolkit's createAsyncThunk.

Uploaded by

1IA26M Naufal S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Practice - ReactJs (Redux)

The document discusses how to implement Redux in a React application. It covers creating a Redux slice and store, connecting the store to React with react-redux, and using Redux hooks like useSelector and useDispatch in components. It also shows how to make asynchronous API calls using Redux Toolkit's createAsyncThunk.

Uploaded by

1IA26M Naufal S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Practice Redux

- First, you need to prepare Redux Toolkits & react-redux:


npm install @reduxjs/toolkit react-redux
-Creating Slice Reducer with the name file counterSlice.js in the redux/slices Folder

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

const initialState = {
value: 0
};

const counterSlice = createSlice({


name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

-Creating a Store with Redux (store.js) Toolkit in Folder redux:


import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slices/counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer
}
});
export default store;

- configure the <Provider> component of react-redux in the Root Element

import React from "react";


import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Provider } from 'react-redux';
import store from "./redux/store.js";

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
- Implementation into react components
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from "../redux/slices/counterSlice";

function CounterComponent() {
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h2>Counter</h2>
<div>
<button onClick={() => dispatch(increment())}>Increment</button>
<span>{count}</span>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
<div>
<input
type="number"
onChange={(e) => dispatch(incrementByAmount(parseInt(e.target.value) || 0))}
placeholder="Enter value"
/>
<button onClick={() => dispatch(incrementByAmount(5))}>Add 5</button>
</div>
</div>
);
}
export default CounterComponent;

useSelector
is used to select specific parts of the state from the Redux store within a React component. It
allows React components to subscribe to specific parts of the state and will re-render
whenever the related state changes.
useDispatch
is used to access the Redux dispatch function within a React component. This dispatch
function is used to send actions to the Redux store, which will cause state changes.
1. Redux AsyncThunk (for communication with API)
-Creating a User Slice(userSlice.js) and fetchUser with AsyncThunk in the
redux/slicer Folder
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const fetchUser = createAsyncThunk("user/fetchUser", async () => {


try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/users`
);
return response.data;
} catch (error) {
return error;
}
});

const userSlice = createSlice({


name: "user",
initialState: {
data: [],
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUser.pending, (state) => {
state.loading = true;
})
.addCase(fetchUser.fulfilled, (state, action) => {
state.loading = false;
state.data = action.payload;
state.error = null;
})
.addCase(fetchUser.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
},
});

export default userSlice.reducer;;

- Add userSlice in Store (store.js)


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

const store = configureStore({


reducer: {
counter: counterReducer
user: userReducer,
}
});
export default store;

- Implementation into react components


import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUser } from "../redux/slices/userSlice";

function UserComponent() {
const userData = useSelector((state) => state.user.data);
const isLoading = useSelector((state) => state.user.loading);
const dispatch = useDispatch();

useEffect(() => {
dispatch(fetchUser());
}, [dispatch]);

if (isLoading) {
return <div>Loading...</div>;
}

console.log(userData);

return (
<div>
<h2>User Details</h2>
{userData?.map((item) => (
<div key={item.id}>
<span>Name: {item.name}</span>
<span> - </span>
<span>Email: {item.email}</span>
</div>
))}
</div>
);
}
export default UserComponent;

https://redux.js.org/tutorials/fundamentals/part-8-modern-redux
https://www.youtube.com/watch?v=u3KlatzB7GM&list=PL0Zuz27SZ-6M1J5I1w2-
uZx36Qp6qhjKo

You might also like