react redux user list click => user detail

Question

userDetail.js

const UsersDetail = () => {

const params = useParams()

const dispatch = useDispatch()

const [email, setEmail] = useState('')
const [name, setName] = useState('')

const usersById = useSelector(state => state.usersById)
const {loading, user, error} = usersById


useEffect(() => {
    if (!user || !user.name) {
         dispatch(getUsersById(params.userId))
        } else {
            setEmail(user.email)
            setName(user.name)
        }
    }, [dispatch, params.userId, user])


    return (
        <FormContainer>
            <h1>User Detail</h1>
            <br />
            <h1>{params.userId}</h1>
            <Form>
                <Form.Control
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                />
                <Form.Control
                    value={name}
                    onChange={e => setName(e.target.value)}
                />
            </Form>
        </FormContainer>
    );
};

export default UsersDetail;

action.js

axios.defaults.baseURL = 'http://localhost:9000/api'

export const getUsersById = (id) => async (dispatch, getState) => {
    try {
        dispatch({
            type: USERS_GET_BY_ID_REQUEST
        })

        const {
            userLogin: {userInfo}
        } = getState()


        const config = {
            headers: {
                Authorization: 'Bearer ' + userInfo.token
            }
        }

        const {data} = await axios.get(`/users/${id}`, config)

        dispatch({
            type: USERS_GET_BY_ID_SUCCESS,
            payload: data
        })

    } catch (err) {
        dispatch({
            type: USERS_GET_BY_ID_FAIL,
            payload: err.response && err.response.data.message
                ? err.response.data.message
                : err.message
        })
    }
}

reducers.js

export const usersGetByIdReducers = (state = {}, action) => {
    switch (action.type) {
        case USERS_GET_BY_ID_REQUEST:
            return {loading: true}
        case USERS_GET_BY_ID_SUCCESS:
            return {loading: false, user: action.payload}
        case USERS_GET_BY_ID_FAIL:
            return {loading: false, error: action.payload}
        default:
            return state
    }
}

store.js

import {createStore, combineReducers, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import {composeWithDevTools} from "redux-devtools-extension";
import {
    userGetProfileReducers,
    userLoginReducers, usersGetByIdReducers,
    usersGetReducers,
    userSignupReducers
} from "./reducers/userReducers";
import {productsGetReducers} from "./reducers/productsReducers";

const reducers = combineReducers({
    userLogin: userLoginReducers,
    userSignup: userSignupReducers,
    userProfile: userGetProfileReducers,
    usersGet: usersGetReducers,
    usersById: usersGetByIdReducers,

    getProducts: productsGetReducers
})

const userInfoFormStorage = localStorage.getItem('userInfo')
    ? JSON.parse(localStorage.getItem('userInfo'))
    : null

const initialState = {
    userLogin: {
        userInfo: userInfoFormStorage
    }
}

const middleware = [thunk]

const store = createStore(
    reducers,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
)

export default store

I want.

userlist => user id Click => user Detail

enter image description here

enter image description here

i want

1. Click User A
2. A user detail output
3. Back
4. Click User B
5. A user detail is output
6. Refresh
7. B user details are output

I want the user details to be printed without refreshing I can't speak English, so it may be insufficient as this is my first question. If you tell me, I will fill in the missing parts.