actions-categories.js

import axios from 'axios'

import { SET_CATEGORIES } from './actionTypes'

export function fetchCategories(categorySlug) {
    return (dispatch) => {
        axios
            .get('/api/categories')
            .then((response) => {
                dispatch(setCategories(response.data))
            })
    }
}

export function setCategories(value) {
    return {
        type: SET_CATEGORIES,
        value
    }
}

actions-index.js

import * as products from './products'
import * as categories from './categories'

const actions = {
    products,
    categories
}

export default actions

actions-products.js

import axios from 'axios'

import { SET_PRODUCTS } from './actionTypes'

export function fetchProducts(categorySlug) {
    return (dispatch) => {
        axios
            .get('/api/products', {
                params: {
                    category_slug: categorySlug
                }
            })
            .then((response) => {
                dispatch(setProducts(response.data))
            })
    }
}

export function setProducts(value) {
    return {
        type: SET_PRODUCTS,
        value
    }
}

app.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
import thunk from 'redux-thunk';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'

import rootReducer from './reducers'
import renderStyles from './lib/RenderCss'
import App from './components/App/App'
import Products from './components/Products/Products'
import Product from './components/Product/Product'
import Build from './components/Build/Build'

/**
 * Setup Redux Store and Reducers
 */
const store = createStore(rootReducer, {}, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
))

renderStyles()

render(
    <Provider store={ store }>
        <Router history={ browserHistory }>
            <Route path="/" component={ App }>
                <IndexRedirect to="/list" />
                <Route path="products" component={ Products } />
                <Route path="products/:categorySlug" component={ Products } />
                <Route path="product/:productId" component={ Product } />
                <Route path="list" component={ Build } />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
)

reducers-categories.js

import { SET_CATEGORIES } from '../actions/actionTypes'

const defaultState = []

export default function(state = defaultState, action) {
    switch (action.type) {
        case SET_CATEGORIES:
            return [
                ...action.value
            ]

        default:
            return defaultState
    }
}

reducers-index.js

import { combineReducers } from 'redux'

import products from './products'
import categories from './categories'

const reducer = combineReducers({
    products,
    categories
})

export default reducer

reducers-products.js

import { SET_PRODUCTS } from '../actions/actionTypes'

const defaultState = {}

export default function products(state = defaultState, action) {
    switch (action.type) {
        case SET_PRODUCTS:
            return {
                ...action.value
            }

        default:
            return defaultState
    }
}