Changing a property React+Redux vs Hyperdom

gistfile1.md

Hyperdom

import hyperdom from 'hyperdom'
import h from 'hyperdom.....'
import renderProductGrid from '../productGrid'

class Orders {
  constructor(options){
    this.products = []
    this.productService = options.productService
    this.loaded = false
  }
  loadProducts() {
    return this.productService.loadProducts()
      .then((products) =>{
        this.products = products
		this.loaded = true
      })
  }
  render() {
    if (!loaded) {
      return this.loadProducts()
    }
    return h('div', 
      renderProductGrid()
    )
  }
}

hyperdom.append(document.body, new Orders());

React + Redux

rootReducer.js

import { combineReducers } from 'redux';

const ordersInitialState = {
	products: [],
};

const ordersReducer = (state=ordersInitialState,action) => {
	switch (action.type) {
		case 'RETRIEVE_PRODUCTS_SUCCESS':
			return {
				...state,
				products: action.products
			};
		default:
			return state;
	}
}

const rootReducer = combineReducers({
	orders:ordersReducer,
});

export default rootReducer;

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger'

let middleware = [thunk];

if (__DEV__) {

	const logger = createLogger({ collapsed: true });
	const reduxImmutableStateInvariant = require('redux-immutable-state-invariant').default();
	middleware = [...middleware,reduxImmutableStateInvariant, logger];
} else {
	middleware = [...middleware];
}

export default function configureStore(initialState) {
	return createStore(
		rootReducer,
		initialState,
		applyMiddleware(...middleware)
	);
}

App.js

import { registerScreens } from './screens'
import { Provider } from 'react-redux';
import configureStore from '../store/configureStore'
import {
  Platform,
} from 'react-native'

const rootScreen = 'Login'

const store = configureStore();

registerScreens(store,Provider)

offer.actions.js

import ProductService from '../../services/product'

const productService = new ProductService()
export function retrieveProductsSuccess(res) {
	return {
		type: 'RETRIEVE_PRODUCTS_SUCCESS',
		products: res
	};
}

export function loadProducts() {
	return function (dispatch) {
    return productService.loadProducts()
      .then((products) => {
        dispatch(retrieveProductsSuccess(products))
      })
	};
}

Order View Component

import React, { Component } from 'react'
import * as ordersActions from './orders.actions';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ProductGrid from '../../components/productGrid'

class Orders extends Component {

  constructor(props){
    super(props)
  }

  componentDidMount() {
    return this.loadProducts.call(this)
  }

  render() {
    return (
      <View style={[styles.container,styles.brandColorBackground]}>
        {
          this.props.products.length > 0 ? <ProductGrid items={this.props.products}></ProductGrid> : <Loader title={'Loading Offers'}/>
        }
      </View>
    );
  }

  loadProducts(){
    return this.props.actions.loadProducts()
  }
}

function mapStateToProps(state, ownProps) {
	return {
		products: state.orders.products,
	};
}

function mapDispatchToProps(dispatch) {
	return {
		actions: bindActionCreators(ordersActions, dispatch)
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(Offers);