Syncing UI State with the Redux Store
Explore how to synchronize UI state with the Redux store using Redux Toolkit. Learn to control radio buttons with Redux state, dispatch actions on change, and use selectors to access state. This lesson helps you manage component state within Redux effectively, preparing you for more complex asynchronous data fetching.
We'll cover the following...
Introduction
We had numberOfResultsSlice created in an earlier lesson. Now is the time to put it to good use.
The first thing we want to do is make sure the radio buttons are controlled inputs, i.e., their state is controlled from the external.
Anytime these buttons are clicked, we will save the value in the Redux store, and the selected radio value will always come from the Redux store.
As a reminder, here’s a quick look at the numberOfResultsSlice from earlier:
import { createSlice } from "@reduxjs/toolkit";
const numberOfResultsSlice = createSlice({
name: "numberOfResults",
initialState: 10,
reducers: {
setNumberOfResults(state, action) {
return