Question on how to work with Stores

[barriehadfield]

I am working on the getting-started docs for Stores and Operations and what I have done so far is show a badly designed component which mixes state and business logic and then the tutorial goes on to refactor that.

Here is the example:

class OfferLuckyDip < React::Component::Base

  define_state discount: 30
  define_state lucky_dip_taken: false

  def render
    div do
      h1 {"Your discount is #{state.discount}%"}
      BUTTON { "Lucky Dip" }.on(:click) do
        state.discount! (state.discount + rand(-5..5))
        state.lucky_dip_taken! true
      end unless state.lucky_dip_taken
    end
  end

end

Which we then refactor to this:

class OfferLuckyDip < React::Component::Base

  before_mount do
    @store = Discounter.new
  end

  def render
    div do
      h1 {"Your discount is #{@store.discount}%"}
      BUTTON { "Lucky Dip" }.on(:click) do
        @store.lucky_dip!
      end unless @store.lucky_dip_taken
    end
  end

end

class Discounter < Hyperloop::Store

   state discount: 30, scope: :class, reader: true
   state lucky_dip_taken: false, scope: :class, reader: true

  def lucky_dip!
    mutate.discount( state.discount + rand(-5..5) )
    mutate.lucky_dip_taken true
  end

end

So my questions are:

• is before_mount do @store = Discounter.new end the best way to create a Store?
• without wanting to get into Operations yet (that comes later in the tutorial) how do I pass the Store between components or how do I access this Store from other components?

[adamcreekroad]

If you are working with class level states, then you never need to create an instance of the store.
You can just call it from anywhere, anytime like Discounter.discount and Discounter.mutate.lucky_dip_taken(false).

If you are using instance states, (I think) you would want to create an instance in the before_mount like you did, and pass down the instance through to whichever child components care about state.
They could then mutate the state, which would rerender the chain of components that care about it and complete the Flux loop.

Feel free to chime in @catmando if I'm wrong/you have anything to add.

[catmando]

@barriehadfield I'm closing this... if needed can you raise an issue in the documentation section?