Introduction to Action Creators

“Actions are payloads of information that send data from your application to your store.” Redux

As part of StoreFront you can use Action Creators to trigger state changes.

Action creators are methods that are available on every tag - both new and existing ones - will have access to Action Creators through the actions property.

For example:

What is an Action

A user action against the system: a way to interface with the state of the page.

Anything that is done results in an action that gets sent to the state.

For example:

• Searching for something
• Changing the sort
• Clicking on a product
• Clicking on a refinement

What isn’t an Action

An action is not triggered when we have user behavior that is not stored in a state.

For example, if the customer is cycling through a carousel on the page, this would not result in an action being triggered.

What could be an Action

If the user behavior is something we want to keep persistent between different states - for example, we want to store if the customer is viewing in Grid or List between searches, this would become an action.

List of Action Creators

Request Generating Actions

If as part of the page development you need to create a request, you will need to trigger one of these actions.

  export const DESELECT_REFINEMENT = 'DESELECT_REFINEMENT';
  export const SELECT_COLLECTION = 'SELECT_COLLECTION';
  export const SELECT_REFINEMENT = 'SELECT_REFINEMENT';
  export const SELECT_SORT = 'UPDATE_SORTS';
  export const UPDATE_AUTOCOMPLETE_QUERY = 'UPDATE_AUTOCOMPLETE_QUERY';
  export const UPDATE_CURRENT_PAGE = 'UPDATE_CURRENT_PAGE';
  export const UPDATE_DETAILS = 'UPDATE_DETAILS';
  export const UPDATE_PAGE_SIZE = 'UPDATE_PAGE_SIZE';
  export const UPDATE_SEARCH = 'UPDATE_SEARCH';

Response Actions

These are made after a request was executed, and these will take the received data back into the store.

  export const RECEIVE_AUTOCOMPLETE_SUGGESTIONS = 'RECEIVE_AUTOCOMPLETE_SUGGESTIONS';
  export const RECEIVE_MORE_PRODUCTS = 'RECEIVE_MORE_PRODUCTS';
  export const RECEIVE_MORE_REFINEMENTS = 'RECEIVE_MORE_REFINEMENTS';

|—|---| | ‘RECEIVE_TEMPLATE’ | Store.Template |