Scribd
Upload
46 views

19 - React - Js (Redux)

The document discusses Redux Modern and Redux AsyncThunk for managing global state and communicating with APIs in React applications. Redux Modern utilizes Redux Toolkit and other best practices to simplify state management. Redux AsyncThunk allows easy handling of asynchronous actions by creating async functions to fetch data from APIs.

Uploaded by

1IA26M Naufal S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

19 - React - Js (Redux)

The document discusses Redux Modern and Redux AsyncThunk for managing global state and communicating with APIs in React applications. Redux Modern utilizes Redux Toolkit and other best practices to simplify state management. Redux AsyncThunk allows easy handling of asynchronous actions by creating async functions to fetch data from APIs.

Uploaded by

1IA26M Naufal S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

2024

React Js
Redux

© 2024 Celerates CELERATES.CO.ID


Content
2024

Redux Modern (management global state)

Redux AsyncThunk (for communication with API)

© 2024 Celerates CELERATES.CO.ID


2024

Redux Modern
(management global state)

© 2024 Celerates CELERATES.CO.ID


Redux
2024

Redux is a State Management application that provides a store for the states
within components in a web application.

© 2024 Celerates CELERATES.CO.ID


Redux Modern
2024

Redux Modern is an approach to using Redux to


manage global state in React applications, utilizing the
latest and best practices that have evolved over time.

The use of Redux Toolkit and other best practices


included in Redux Modern can enhance development
productivity and simplify state management in React
applications using Redux.

© 2024 Celerates CELERATES.CO.ID


Features of Redux Modern
2024

▪ Redux Toolkit
Redux Toolkit is the official Redux package that provides tools to simplify and accelerate development with Redux
▪ createSlice
createSlice is a function from Redux Toolkit that allows you to create slice reducers more easily and declaratively.
▪ configureStore
configureStore function that simplifies Redux store configuration. This function automatically integrates Redux
middleware like Redux Thunk to handle asynchronous actions, eliminating the need to manually set up middleware.
▪ createAsyncThunk
createAsyncThunk allows easy handling of asynchronous actions in Redux

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

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


npm install @reduxjs/toolkit react-redux

▪ Creating a Slice Reducer

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

▪ configure the <Provider> component of react-


▪ Creating a Store with Redux Toolkit
redux in the Root Element

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

▪ Implementation into react components

useSelector is used to select specific parts of


the state from the Redux store within a React
component.

useDispatch is used to access the Redux


dispatch function within a React component.

© 2024 Celerates CELERATES.CO.ID


2024

Redux AsyncThunk
(for communication with API)

© 2024 Celerates CELERATES.CO.ID


Redux AsyncThunk
2024

createAsyncThunk enables easy handling of asynchronous


actions in Redux. By using createAsyncThunk, you can create
actions that fetch data from APIs or perform other asynchronous
operations more easily and in a structured manner.

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

▪ Creating a User Slice and fetchUser with AsyncThunk

The "builder callback" notation in extraReducers


is a way to handle various cases for specific
action types or default cases, similar to using a
switch statement.

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

▪ Add userSlice in Store

© 2024 Celerates CELERATES.CO.ID


Basic Usage
2024

▪ Implementation into react components

© 2024 Celerates CELERATES.CO.ID


2024

Any question?

© 2024 Celerates CELERATES.CO.ID


2024

© 2024 Celerates CELERATES.CO.ID


2024

References for self-study:


https://www.youtube.com/watch?v=u3KlatzB7GM&list=PL0Zuz27SZ-
6M1J5I1w2-uZx36Qp6qhjKo

© 2024 Celerates CELERATES.CO.ID


2024

GUIDING RESOURCE
https://redux.js.org/

https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

© 2024 Celerates CELERATES.CO.ID

You might also like