Как реализовать кнопку Нравится и Не нравится в reactjs

Question

Я работаю над проектом, который использует функции «Нравится» и «Не нравится». На странице productDetail пользователь может выбрать понравившийся товар и не понравиться ему. Я использую реаги и избыточность для государственного управления. Хотя я добавил кнопку «Мне нравится» довольно хорошо, но проблема в том, что если я обновлю sh страницу, она вернется к кнопке по умолчанию.

Любая помощь будет отличной. Вот мой код.

likeActions. js

export const likeProduct = id => dispatch => {
  new _rest().put(`/buyer/product/${id}/like`).then(res => {
    console.log('Liked Product', res)
    dispatch({
      type: actionTypes.PRODUCT_LIKED
    });
  });
};

export const unLikeProduct = id => dispatch => {
  new _rest().delete(`/buyer/product/${id}/like`).then(res => {
    console.log('Liked Product Unilke', res)
    dispatch({
      type: actionTypes.PRODUCT_UNLIKE
    });
  });
};

редуктор. js

 case actionTypes.PRODUCT_LIKED:
      return {
        ...state,
        productLiked: true
      };
    case actionTypes.PRODUCT_UNLIKE:
      return {
        ...state,
        productLiked: false
      };

как кнопка. js

<BottomNavigationAction
              onClick={likeProduct}
            label="Like"
            value="Like "
            icon={
                ui.productLiked == true ?  <FavoriteIcon style={{color: 'red'}}/> : <FavoriteIcon/>
            }
          />