Configuration and setup - React Book

We'll talk terminology as we go, so take this setup discussion lightly (implementing is more important to get our fingers moving). We'll restructure our app just slightly (annoying, I know... but this is the last time) so we can create a wrapper component to provide data down through our app.

Our app will look like:

[Root] -> [App] -> [Router/Routes] -> [Component]

Without delaying any longer, let's move our src/App.js into the src/containers directory and we'll need to update some of the paths from our imports at the same time. The new file will need to look like:

import React from 'react';

import {

Router, Route, hashHistory, IndexRoute } from 'react-router';

// We'll import the Index component from this // src/containers directory directly

import { Index } from './Index';

// We'll load our views from the `src/views` // directory

import Home from '../views/Home/Home';

import About from '../views/About/About';

export class App extends React.Component { render() {

return (

</Route>

</Router>

) } }

export default App;

In addition, we'll need to create a new container we'll call Root which will wrap our entire <App /> component and make the store available to the rest of the app. Let's create the

src/containers/Root.js file: touch src/containers/Root.js

For the time being, we'll use a placeholder component here, but we'll replace this content as we talk about the store. For now, let's export something:

import React from 'react';

import App from './App';

export const Root = (props) => { return (

<App />

); }

export default Root;

Finally, let's update the route that we render our app in the src/index.js file to use our new Root container instead of the App it previously used.

import React from 'react';

import ReactDOM from 'react-dom';

import Root from './containers/Root';

import './index.css'; ReactDOM.render( <Root />,

document.getElementById('root') );

Next, we'll create a redux module (just made this term up -- kind of, not really... I wrote about it here

(https://www.fullstackreact.com/articles/better-redux- module-management/)) with some action creators, a reducer function, and some types. Finally, we'll wrap this all together by creating a store and passing it down to the new Root

I'm purposely keeping this high-level introduction short, so hang tight if that's a mouthful, it will all make more sense shortly.

Let's setup the structure to allow us to add redux. We'll do

almost all of our work in a src/redux directory. Let's create that directory and a src/redux/modules/ directory to create our redux modules.

mkdir -p src/redux/modules

touch src/redux/configureStore.js

touch src/redux/modules/currentTime.js

In order to create a store, we'll use the new

src/redux/configureStore.js to export a function which will be responsible for creating the store.

The src/redux/configureStore.js file will need to export a function that will return a redux store. The redux package exports a function called createStore which will create the actual store for us, so let's open up the

src/redux/configureStore.js file and export a function (we'll define shortly) called configureStore() and import the

import {createStore} from 'redux';

export const configureStore = () => { // Return the store

}

export default configureStore;

We don't actually return anything in our store quite yet, so let's actually create the redux store using the createStore function we imported from redux:

import {createStore} from 'redux';

export const configureStore = () => { const store = createStore();

return store; }

export default configureStore;

If we load our page in the browser, we'll see we have one giant error and no page gets rendered.

The error redux is giving us is telling us that we don't have a reducer inside our store. Without a reducer, it won't know what to do with actions or how to create the state, etc. In order to move beyond this error, we'll need to define some reducers:

The term reducer is just a fancy way of saying functions that return state. When we talk about a reducer, we are talking about this single function that gets executed when an action is fired. It can either handle the action (i.e. create a new state for it's piece of the state tree) or not handle it and return the original state.

The reducer function receives two arguments when it's called: 1. The state tree

2. The action which triggered a change

For now, let's create an empty reducer function that always returns the current state. Let's open up our

src/redux/modules/currentTime.js file. We'll use this file to manage the data we'll keep as the time data as well as any actions we have that relate to time.

Inside the file, let's export a reducer function that (for now) returns the initial state.

Let's define this function. Using ES6, we can also set the initial state for the first time the reducer is called (which redux

expects us to return an initial state):

Reducers

const initialState = { currentTime: new Date() }

export const reducer = (state = initialState, action) =>

{

return state; }

In document React Book - Freebie (Page 171-178)