Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A gist showing my App.js component, the actions and reducers for the redux store
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../../actions/actionCreator';
function mapStateToProps(state) {
return {
cart: state.cart,
products: state.products
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
class App extends Component {
componentDidMount() {
this.props.initializeCart()
this.props.getProducts()
}
render() {
return (
<div className="App">
{React.cloneElement(this.props.children, this.props)}
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
//ACTIONS
import {
fetchAllProducts,
fetchCart } from '../shopifyApi/fetching';
// cart actions
function loadCart() {
return {
type: 'LOAD_CART'
}
}
function loadCartSuccess(cartItem) {
return {
type: 'LOAD_CART_SUCCESS',
cartItem
}
}
function loadCartError(error) {
return {
type: 'LOAD_CART_ERROR',
error
}
}
export function addItemToCart(cartItem) {
return {
type: 'ADD_ITEM_TO_CART',
cartItem
}
}
export function removeItemToCart(lineItemId) {
return {
type: 'REMOVE_ITEM_TO_CART',
lineItemId
}
}
// product actions actions
function loadProducts() {
return {
type: 'PRODUCTS_LOAD',
};
}
function loadProductsSuccess(products) {
return {
type: 'PRODUCTS_LOAD_SUCCESS',
products,
}
}
function loadProductsFail(error) {
return {
type: 'PRODUCTS_LOAD_FAIL',
error
};
}
// thunks
export function initializeCart() {
return dispatch => {
dispatch(loadCart());
fetchCart()
.then((cartItem) => {
dispatch(loadCartSuccess(cartItem));
})
.catch(error => {
console.log('Create Cart Error', error);
dispatch(loadCartError(error));
});
};
}
export function getProducts() {
return dispatch => {
dispatch(loadProducts());
fetchAllProducts()
.then((products) => {
dispatch(loadProductsSuccess(products));
})
.catch(error => {
dispatch(loadProductsFail(error));
});
};
}
//REDUCERS
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
const initialState = {
items: {},
loading: false,
error: null
};
const cart = (state = initialState, action) => {
switch (action.type) {
case 'LOAD_CART':
return {
...state,
loading: true
};
case 'LOAD_CART_SUCCESS':
return {
...state,
items: action.cartItem
};
case 'LOAD_CART_FAIL':
return {
...state,
error: action.error,
loading: false
}
case 'ADD_ITEM_TO_CART':
return {
...state,
items: action.cartItem
}
default:
return state;
}
};
const products = (state = initialState, action) => {
switch (action.type) {
case 'PRODUCTS_LOAD':
return {
...initialState,
loading: true,
};
case 'PRODUCTS_LOAD_SUCCESS':
return {
...state,
items: action.products
};
case 'PRODUCTS_LOAD_FAIL':
return {
...state,
error: action.error,
loading: false,
};
default:
return state;
}
}
const rootReducer = combineReducers({cart, products, routing: routerReducer});
export default rootReducer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.