redux-intro-walkthrough-comments-index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//lets use this store!
import createStore from './createStore';
import manageBand from './reducers/manageBand';


// setting this function call to a variable allows us to
// access the return functions in createStore like such:
// store.dispatch();
const store = createStore(manageBand);


// import './index.css';

//Add the below code to the index.js file
//For React bootstrap

// import 'bootstrap/dist/css/bootstrap.css';
// import 'bootstrap/dist/css/bootstrap-theme.css';


// We are wrapping the ReactDOM render method in a funciton
// so we can manually change the DOM after a state change in
// Redux has been made.

// We're passing in store as a property so that all the children components
// have access to the current state and also to make state changes.
// The function itself being passed through makes it easy to make and retrieve
// states and state changes.
function render(){
  ReactDOM.render(
    <App store={ store }/>,
    document.getElementById('root')
  );
}

// We are exporting the wrapped ReactDom Function method so it can be used
// in our createStore.js file.
export const renderer = { render: render };

//We wrapped our ReactDOM in a funciton.  This means that it won't
// run automatically anymore. We need to call the function in order to see our DOM
// By using store.dispatch(), we are doing 2 things,
// 1. we're able to set our state to the reducer state.
// 2. We are calling the ReactDOM function, making it viewable to our users.
store.dispatch({ type: 'buddy' });