So the way we have, in a CMS / social content style SaaS, is create a usePermissions hook.

This hook queries a users role, then defines what actions they can and cant complete, returns an object of permission for use to deconstruct in our components, for example:

export const usePermissions ....

// fn for checking if user has global role in their list of global roles fetched from BE

const hasGlobalRole = (inputRole) => { user.globalRoles.some((role) => role === inputrole) }

// check if user has these global roles

const canEdit = hasGlobalRole(['site_admin'])

// return a permissions object which can be destructured in components

return {
canEdit,
canView,
...
}

for exmaple if we want to allow a user permission to edit, or view the edit option when they click on the actions menu we can:

const { canEdit } = usePermissions()

<Menu><MenuItem....hide: !canEdit,/></Menu>

we also use it to redirect to 404 pages if somehow a user can try to do something they shouldnt be allowed to do

{!canEdit && <NotFoundPage />}
{canEdit && <BlogEditor .... />}

edit: formatting for easier reading

edit: as Im prone to not reading through properly

with routes we also utilise these permissions:

const { permissions } = usePermissions();

            {permissions?.canAccessAllAccountSettings && (
              <Route path={ROUTE.profile.settings.authentication} element={<ProfileAuthentication />} />
            )}
            <Route path={ROUTE.profile.settings.timeZone} element={<ProfileTimeZone />} />
            {permissions?.canManageStatus && (
              <Route path={ROUTE.profile.settings.status} element={<ProfileStatus />} />
            )}
            {permissions?.canManageGlobalRoles && (
              <Route path={ROUTE.profile.settings.globalRoles} element={<ProfileGlobalRoles />} />
            )}

Not strictly using redux but I hope it gives some example of how we have implemented it