Store

The store is a state container for your StoreFront application. To access the store from within a component, use:

this.flux.store.getState();

This will give you the full state of your application. For convenience, a number of Selectors exist, that allow you to more easily access data in your store.

The only way to change your store, is to call an Action Creator Method. Once an action method has been called and handled by the store, it will cause an Event to fire.

Using the store

As a real-world example, we will set up an app with the following custom behavior: when a user searches for a specific term, we will alter the default sort order of the products. To start out, follow the advanced build process in slush-storefront.

Setup

Ready your page to show products and pull in the sort options:

1. Set up your configuration file so that products are returned on search (this requires supplying your customerId, area, collection, and setting up a structure for your products).
2. You will also have to provide at least two sort options in your configuration, to be able to sort your products in different ways.
3. Add the <gb-sort></gb-sort> tag to your src/tags/app/index.html file. This will allow you to determine whether your sort order is being applied for searches with the specified search term.

Listening on Events

In the src/tags/app/index.js file, add this function to your App class:

init() {
  this.flux.on('original_query_updated', this.changeSort);
}

When the tag is initialized, this will add a listener that listens to the 'original_query_updated' event, and fires the changeSort method.

Next, you will need to add the changeSort method to your App class. Make it an arrow function so you get the correct this. This might require adding the transform-class-properties plugin to your .babelrc file and adding the babel-plugin-transform-class-properties to your dev-dependencies.

Using a Selector to access data in the store

To access the currently applied search term, there is a useful selector called currentQuery(store). This selector returns the currently applied query (ie, if a correctedQuery has been applied, it returns it, otherwise it returns the originalQuery). All of the selectors require passing in the store in order to access the requested section of the store.

Add the changeSort method to your App class, and use the selector:

changeSort = () => {
  const query = this.flux.selectors.currentQuery(this.flux.store.getState());
}

Updating the store by firing an Action

The next step is to check whether the query matches a specific search term, and if it does, fire an action to update the sort. Otherwise, it should apply the initial default sort. To do this, you can use the selectSort(index) action method. It takes the index of the sort, and changes the store to apply this sort. Additionally, for an action to take effect, you must call dispatch on it.

Update your changeSort method:

changeSort = () => {
  const query = this.flux.selectors.currentQuery(this.flux.store.getState());
  if (query === 'dress') {
    this.actions.selectSort(1);
  } else {
    this.actions.selectSort(0);
  }
}

Now when you run your app, you should see that when you search for ‘dress’ the second sort option is applied, whereas for all other searches the first sort option is applied.

Get the search query

It’s straightforward to extract the search query from the Flux Capacitor, below is an example how to get the current search query from the application state.

const query = this.flux.store.getState().data.present.query.original