RDK README.md Examples

Component Folder Structure

/**
  Located in src/components/MyComponent/
*/

index.js
MyComponent.js
MyComponent.css
MyComponentContainer.js
MyComponentReducer.js

Traditional React+Redux Actions.js

/**
  Actions
  
  Typically located in:
    src/actions/index.js
  or
    src/actions/MyComponentActions.js
  or
    src/components/MyComponent/MyComponentActions.js
*/

// Type Constants
export const CREATE_CANVAS_SHAPE = "CREATE_CANVAS_SHAPE";
export const CREATE_CANVAS_IMAGE = "CREATE_CANVAS_IMAGE";

// Action Dispatcher
export function onCreateShape(shapeType) {
  return {
    type: CREATE_CANVAS_SHAPE,
    data: shapeType
  };
}

// Action Dispatcher
export function onCreateImage(imageUrl) {
  return {
    type: CREATE_CANVAS_SHAPE,
    data: imageUrl
  };
}

Traditional React+Redux Component.jsx

/**
  Components & Sub-components
  
  Typically located in:
    src/components/MyComponent/MyComponentToolbar.js
    
  (And then imported and used inside:
    src/components/MyComponent/index.js
  or
    src/components/MyComponent/MyComponent.js
  )
*/

// Import React and Redux dependencies
import React { Component } from "react";
import { connect } from "redux";

// Import Action Dispatchers
import {onCreateShape, onCreateImage} from "./MyComponentActions";

// Define class to contain React Component, and extend base Component class
class MyComponentToolbar extends Component{
  
  // Components require a render() function, which has access to: this.props.
  // this.props is supplied action dispatchers, by the connect() call at the bottom of this file.
  render() {
    // Deconstruct the action dispatchers from this.props;
    const {onCreateShape, onCreateImage} = this.props;

    // Return the content to be rendered.
    return (
      <div>
        <button onClick={onCreateShape("square")}>Create Square</button>
        <button onClick={onCreateShape("circle")}>Create Circle</button>
        <button onClick={onCreateImage("myFavoriteImage.jpg")}>Create Image</button>
      </div>
    );
  }
}

// Simple example implementation
//   mapStateToProps is a fundemental piece of Redux's implementation pattern.
function mapStateToProps(state = {}, ownProps = {}) {
  return state;
}

// Export the React Component
export default connect(mapStateToProps, {
  onCreateShape,
  onCreateImage
})(MyComponentToolbar);

Traditional React+Redux Reducer.js

/**
  Reducers
  
  Typically located in:
    src/reducers/index.js
  or
    src/reducers/MyComponentReducer.js
  or
    src/components/MyComponent/MyComponentReducer.js
*/

// Import Canvas Object Classes
import { CanvasShape, CanvasImage } from "../models/Canvas";

// Import Action Type constant
import { CREATE_CANVAS_SHAPE, CREATE_CANVAS_IMAGE } from "./MyComponentActions";

// Define reducer task functions
function handleAddCanvasContent(state, objectType, objectDetails) {
  const objectClass = (objectType === "SHAPE") ? CanvasShape : CanvasImage;
  const newObject = new objectClass(objectDetails);
  
  return {
    ...state,
    canvasContents: [
      ...state.canvasContents,
      newObject
    ]
  };
}

// Export main reducer function
export const reducer = (state = {}, action) => {
  switch(action.type) {
    case CREATE_CANVAS_SHAPE:
      return handleAddCanvasContent(state, "SHAPE", action.data);
    case CREATE_CANVAS_IMAGE:
      return handleAddCanvasContent(state, "IMAGE", action.data);
    default:
      return state;
  }
};