Как показать изменение экземпляра на кнопках «Нравится» и «В отличие» в reactjs

Question

Я работаю над проектом reactjs, в котором есть кнопка «Нравится» и «Не нравится», и если кнопка «Нравится» или «Не нравится», также проверяется API. Но проблема в том, чтобы увидеть изменения, которые нужно обновить на странице sh. Я использую реагировать с избыточностью для государственного управления. Любая помощь будет отличной. Вот мои коды.

действия.

export const likeShop = (shopId) => dispatch => {
    dispatch({
        type: shopActionTypes.SHOP_LIKE_LOAD
    });
    new _rest().put(`/buyer/shop/${shopId}/like`)
        .then((res) => {
            console.log('like shop', res);
            dispatch({
                type: shopActionTypes.SHOP_LIKE_SUCCESS,
                payload: res
            })
        }).catch((err) => {
            dispatch({
                type: shopActionTypes.SHOP_LIKE_ERROR,
                error: err
            })
    })
}
export const unLikeShop = (shopId) => dispatch => {
    dispatch({
        type: shopActionTypes.SHOP_UNLIKE_LOAD
    });
    new _rest().delete(`/buyer/shop/${shopId}/like`)
        .then((res) => {
            console.log('like shop', res);
            dispatch({
                type: shopActionTypes.SHOP_UNLIKE_SUCCESS,
                payload: res
            })
        }).catch((err) => {
        dispatch({
            type: shopActionTypes.SHOP_UNLIKE_ERROR,
            error: err
        })
    })
}

редукторы

export default (state={}, action) => {
    switch (action.type) {
        case shopActionTypes.SHOP_LIKE_LOAD:
        case shopActionTypes.SHOP_LIKE_SUCCESS:
            return {
                ...state,
                ...action.payload
            };
        case shopActionTypes.SHOP_LIKE_ERROR:
            return {
                ...state,
                ...action.error
            };
        default:
            return state;
    }
}

компонент

const shopLike = () => {
      if(isLiked.shop !== null &&  isLiked.shop === true) {
        this.props.unLikeShop(dataProduct.details.vendorId)
      }else if(isLiked.shop !== null && isLiked.shop === false) {
        this.props.likeShop(dataProduct.details.vendorId);
      }
    }

 <BottomNavigationAction
            onClick={shopLike}
            label="Shop"
            value="Shop"
            icon={
              isLiked && isLiked.shop ===true ? <StoreIcon style={{color:'red'}}/>:
                  <StoreIcon/>
            }
          />

состояние загрузки

const mapStateToProps = (state) => {
  return {
    userTypeDetails: state.userType,
    userData: state.user.data.currentUser,
    dataProduct: state.productDetails.data,
    ui: state.productDetails.ui,
    isLiked: state.addToCart.isItemInCart,
  };
};
const mapDispatchToProps = {
  openTeamDrawer,
  likeProduct,
  unLikeProduct,
  likeShop,
  unLikeShop
};

Здесь isLiked поступает из хранилища резервов. и есть еще один редуктор для проверки, который возвращается, если магазин нравится, не в логическом значении.