block11.javascript

// App.jsx

import React from 'react';
// We use react-router v3, migrating to v4 will be done in the future
import { Router, Route, Redirect, IndexRoute, browserHistory } from 'react-router';

// all our new redux actions
import * as clientActions from 'actions/clientActions';

// redux helper that connects the actions to the dispatcher
import { bindActionCreators } from 'redux';

// redux helper that connects redux actions to the dispatcher
import { connect } from 'react-redux';

// all the app components
import Clients from '/Clients';
import Shipments from '/Shipments';
import Products from '/Products';

// other flux actions that have not been migrated
import AuthActions from 'actions/AuthActions';

// the app container
const App = ({ actions, clients }) => (
    <Router history={browserHistory}>
        {/* Other flux stores still used */}
        <Route path="/" component={Home} onEnter={AuthActions.isAuthenticated}>
            {/* Untouched routes using Flux */}
            <Route path="products" component={Products} />
            <Route path="shipments" component={Shipments} />

            {/* Modified route using Redux state and actions */}
            <Route
                path="clients"
                component={() => (
                    <Clients
                        clients={clients}
                        getClients={actions.getClients}
                        toggleSorting={actions.toggleSorting}
                    />
                )}
            />
        </Route>
    </Router>
);

// pass the redux store(s) to the component as props
const mapStateToProps = state => ({
    clients: state.clients
    // These can be done in a future pull request with our new setup:
    // TBD: products: state.products
    // TBD: shipments: state.shipments
});

// pass redux actions to the component as props
const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(clientActions, dispatch)
});

// pass both redux state and actions to your component
export default connect(mapStateToProps, mapDispatchToProps)(App);

// export just the unplugged component, this is helpful for testing
export { App };