import hyperdom from 'hyperdom'
import h from hyperdom.html
import renderProductGrid from '../productGrid'
import ProductService from '../../services/product'
class Orders {
constructor(){
this.products = []
this.productService = new ProductService()
}
async onload() {
this.products = await this.productService.loadProducts()
}
render() {
return <div>
{renderProductGrid(this.products)}
</div>
}
}
hyperdom.append(document.body, new Orders());
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()
}
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);