Product Data Store Example

action-types.js

const TYPES = {
    FETCH_FROM_API : "FETCH_FROM_API",
    HYDRATE_PRODUCT: "HYDRATE_PRODUCT",
};
    
export default TYPES;

actions.js

import TYPES from "./action-types";
const { FETCH_FROM_API, HYDRATE_PRODUCT } = TYPES;

// Fetch from the API.
export const fetchFromAPI = ( path ) => {
  return {
      type: FETCH_FROM_API,
      path,
  };
}

// Set the product.
export const hydrateProduct = (product) => {
  return {
      type: HYDRATE_PRODUCT,
      product
  };
}

constants.js

export const STORE_KEY = 'wc/mnm/container';

controls.js

import apiFetch from '@wordpress/api-fetch';

export const FETCH_FROM_API = (action) => {
    return apiFetch( { path: action.path } );
}

index.js

/**
 * External dependencies
 */
import { createReduxStore, register } from '@wordpress/data';
import { controls as wpControls } from '@wordpress/data-controls';

/**
 * Internal dependencies
 */
import * as selectors from './selectors';
import * as actions from './actions';
import * as resolvers from './resolvers';
import * as localControls from "./controls";
import reducer from './reducer';

import { STORE_KEY as CONTAINER_STORE_KEY } from './constants';

export { CONTAINER_STORE_KEY };

export const store = createReduxStore( CONTAINER_STORE_KEY, {
	reducer,
	selectors,
	resolvers,
	controls,
	actions,
} );

register( store );

reducer.js

import TYPES from "./action-types";

const { HYDRATE_PRODUCT } = TYPES;

const DEFAULT_STATE = { product: false };

const reducer = ( state = DEFAULT_STATE, action ) => {

  switch (action.type) {

    case HYDRATE_PRODUCT: {
   
      return {
        ...state,
        product: action.product
      };
    
    }

    default:
      return state;
  }
};

export default reducer;

resolvers.js

/**
 * External dependencies
 */
import { getSetting } from '@woocommerce/settings';
import { fetchFromAPI, hydrateProduct } from './actions';

/**
 * Fetch a product object from the Store API.
 *
 * @param {number} productId Id of the product to retrieve.
 */
export function* getProduct( productId ) {

    if ( productId ) {

      const path = `/wc/store/v1/products/${productId}`;
  	  const product = yield fetchFromAPI( path );
      return hydrateProduct( product );

    }

    return;

};

selectors.js

export const getProduct = ( state ) => {
    return state.product || false;
}