react redux container components added

Author: bipinswarnkar1989

react-redux-client/package.json

@@ -4,13 +4,20 @@
   "private": true,
   "dependencies": {
     "react": "^15.6.1",
+    "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
-    "react-scripts": "1.0.11"
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-bootstrap": "^0.24.2",
+    "react-router-redux": "^4.0.8",
+    "react-scripts": "1.0.11",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

react-redux-client/src/App.js

@@ -1,21 +1,30 @@
+// ./react-redux-client/src/App.js
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Provider } from 'react-redux';
+import { Router, browserHistory } from 'react-router';
+import PropTypes from 'prop-types';
+import { syncHistoryWithStore } from 'react-router-redux';
+import configureStore from './store/configureStore';
+import routes from './routes';
+
+const store = configureStore();
+const history = syncHistoryWithStore(browserHistory, store);
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+      <Provider store={store}>
+        <div>
+          <Router history={history} routes={routes} />
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      </Provider>
     );
   }
 }
 
+Root.propTypes = {
+  store: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+}
+
 export default App;

react-redux-client/src/App.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Navbar,Nav,NavItem,MenuItem } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import './App.css';
+
+export default class App extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return(
+      <div>
+      <Navbar inverse  collapseOnSelect className="customNav">
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">BookLibrary</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Nav>
+        <LinkContainer to="/">
+           <NavItem eventKey={1}>Home</NavItem>
+        </LinkContainer>
+        <LinkContainer to="/books">
+           <NavItem eventKey={2}>Books</NavItem>
+        </LinkContainer>
+        <LinkContainer to="/favourites">
+           <NavItem eventKey={3}>Favourites</NavItem>
+        </LinkContainer>
+      </Nav>
+      <Nav pullRight>
+      {this.props.location.pathname === '/books' &&
+      <LinkContainer to="/" onClick={this.toggleAddBook}>
+         <NavItem eventKey={1}>Add Book</NavItem>
+      </LinkContainer>
+      }
+      </Nav>
+    </Navbar.Collapse>
+  </Navbar>
+  <div className="container">
+  { /* Each Smaller Components */}
+   {this.props.children}
+  </div>
+ </div>
+    );
+  }
+}

react-redux-client/src/App.css react-redux-client/src/components/App.css

@@ -0,0 +1,22 @@
+// ./react-redux-client/src/containers/App.js
+import { connect } from 'react-redux';
+import * as appActions from '../actions/appActions';
+import App from '../components/App';
+
+// map state from store to props
+const mapStateToProps = (state) => {
+  return {
+    //you can now say this.props.mappedAppSate
+    mappedAppState: state.appState
+  }
+}
+
+// map actions to props
+const mapDispatchToProps = (dispatch) => {
+  return {
+    //you can now say this.props.mappedAppActions
+    mappedToggleAddTodo: () => dispatch(appActions.toggleAddTodo())
+  }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(App);

react-redux-client/src/components/App.js

@@ -0,0 +1,22 @@
+// ./react-redux-client/src/containers/Todo.js
+import { connect } from 'react-redux';
+import * as todoActions from '../actions/todoActions';
+import Todo from '../components/Todo';
+
+// map state from store to props
+const mapStateToProps = (state) => {
+  return {
+    //you can now say this.props.mappedAppSate
+    mappedTodo: state.todo
+  }
+}
+
+// map actions to props
+const mapDispatchToProps = (dispatch) => {
+  return {
+    //you can now say this.props.mappedAppActions
+
+  }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(Todo);

react-redux-client/src/containers/App.js

@@ -0,0 +1,24 @@
+// ./react-redux-client/src/containers/Todos.js
+import { connect } from 'react-redux';
+import * as todoActions from '../actions/todoActions';
+import Todos from '../components/Todos';
+
+// map state from store to props
+const mapStateToProps = (state) => {
+  return {
+    //you can now say this.props.mappedAppSate
+    mappedTodosState: state.todos
+  }
+}
+
+// map actions to props
+const mapDispatchToProps = (dispatch) => {
+  return {
+    //you can now say this.props.mappedAppActions
+    mappedAddTodo: todo => dispatch(todoActions.addTodo(todo)),
+    mappedDeleteTodo: todoToDelete => dispatch(todoActions.deleteTodo(todoToDelete)),
+    mappedEditTodo: todoToEdit => dispatch(todoActions.deleteTodo(todoToEdit))
+  }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(Todos);

react-redux-client/src/containers/Todo.js

@@ -0,0 +1,13 @@
+// ./react-redux-client/src/routes.js
+import React from 'react';
+import { Route, IndexRoute } from 'react-router';
+import App from './containers/App';
+import Todos from './containers/Todos';
+import Todo from './containers/Todo';
+
+export default (
+  <Route path="/" component={App}>
+     <IndexRoute component={Todos} />
+     <Route path="/:id" component={Todo} />
+  </Route>
+)

react-redux-client/src/containers/Todos.js

@@ -0,0 +1,26 @@
+// ./react-redux-client/src/store/configureStore.js
+import {createStore, compose, applyMiddleware} from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+
+export default function configureStore(initialState) {
+  const middlewares = [
+    thunk,
+  ];
+
+  const store = createStore(rootReducer, initialState, compose(
+    applyMiddleware(...middlewares),
+    window.devToolsExtension ? window.devToolsExtension() : f => f // add support for Redux dev tools
+    )
+  );
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers').default; // eslint-disable-line global-require
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}