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: ```js import { createSlice } from "@reduxjs/toolkit"; const numberOfResultsSlice = createSlice({ name: "numberOfResults", initialState: 10, reducers: { setNumberOfResults(state, action) { return action.payload; }, }, }); export const { setNumberOfResults } = numberOfResultsSlice.actions; export default numberOfResultsSlice.reducer; ``` From the code block above, it becomes apparent that the next line of action is to `dispatch` the `setNumberOfResults` action creator when the radios are clicked. Also, we must retrieve the state value from the reducer via a selector. The following code shows how we'll `dispatch` the `setNumberOfResults`. ```js // NumberOfResults.jsx ... import { useDispatch, useSelector } from "react-redux"; import { setNumberOfResults } from "./numberOfResultsSlice"; export const NumberOfResults = () => { // look here 👇 const dispatch = useDispatch(); const numberOfResults = useSelector((state) => state.numberOfResults); // look here 👇 const onChange = (val) => { dispatch(setNumberOfResults(val)); }; return ( Number of results: {/* Look here 👇*/} 10 tweets 15 tweets 20 tweets ); }; ``` Note that we’re making use of `useDispatch` and `useSelector` from react-Redux.

Syncing UI State with the Redux Store

Introduction