ビューファイルの編集

link_toメソッドにremote: trueを追加します。

app/views/recipes/show.html.erb

# 中略
<% if current_user != @recipe.user %>
  <div class="recipe-like">
    <% if @recipe.liked_by(current_user).blank? %>
      <%= link_to "お気に入りに保存", recipe_likes_path(@recipe), method: :post, remote: true, class: "btn btn-success btn-sm" %> #編集
    <% else %>
      <%= link_to "保存済み", recipe_like_path(@recipe,@recipe.liked_by(current_user)), method: :delete, remote: true, class: "btn btn-outline-success btn-sm" %> #編集
    <% end %>
  </div>
<% end %>
# 以下略

コントローラーの編集

redirect_toからrespond_toに変更します。
respond_to :jsと記述することによってjs形式でレスポンスを返すようになり、app/views/コントローラ名/アクション名.js.erbが出力されます。

app/controllers/likes_controller.rb

class LikesController < ApplicationController

  def create
    @like = current_user.likes.build(like_params)
    @recipe = @like.recipe
    if @like.valid?
      @like.save
      respond_to :js #編集
    end
  end

  def destroy
    @like = Like.find(params[:id])
    @recipe = @like.recipe
    if @like.destroy
      respond_to :js #編集
    end
  end

js.erbファイルの作成、編集

respond_to :jsで出力するファイルを作成していきます。

ターミナル

touch app/views/likes/{create.js.erb,destroy.js.erb}

それではcreate.js.erbから編集してきましょう。

.recipe-likeでclassを取得し.htmlの()内のHTMLに置き換えます。

app/views/likes/create.js.erb

$('.recipe-like').
html('<%= link_to "保存済み", recipe_like_path(@recipe,@recipe.liked_by(current_user)), method: :delete, remote: true, class: "btn btn-outline-success btn-sm" %>');

同じ要領でdestroy.js.erbも編集します。

app/views/likes/destroy.js.erb

$('.recipe-like').
html('<%= link_to "お気に入りに保存", recipe_likes_path(@recipe), method: :post, remote: true, class: "btn btn-success btn-sm" %>');

以上で実装完了です。
それでは挙動を確認してみましょう。