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
