Repository: stowball/dummys-guide-to-redux-and-thunk-react
Branch: master
Commit: 1b4a36a2f702
Files: 14
Total size: 9.6 KB

Directory structure:
gitextract_dd2m_63k/

├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── nwb.config.js
├── package.json
├── public/
│   └── .gitkeep
└── src/
    ├── actions/
    │   └── items.js
    ├── components/
    │   └── ItemList.js
    ├── index.html
    ├── index.js
    ├── reducers/
    │   ├── index.js
    │   └── items.js
    └── store/
        └── configureStore.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
# http://editorconfig.org
root = true

[*.{css,html,js,scss}]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .eslintrc
================================================
{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
          "jsx": true
        },
        "sourceType": "module"
    },
    "env": {
        "browser": true,
        "es6": true
    },
    "globals": {
        "module": true,
    },
    "plugins": [
      "react"
    ],
    "extends": [
      "plugin:react/recommended"
    ],
    "rules": {
        "comma-dangle": [2, "never"],
        "no-cond-assign": [2, "except-parens"],
        "no-console": 1,
        "no-constant-condition": 2,
        "no-control-regex": 2,
        "no-debugger": 2,
        "no-dupe-args": 2,
        "no-dupe-keys": 2,
        "no-duplicate-case": 2,
        "no-empty": 1,
        "no-empty-character-class": 2,
        "no-ex-assign": 2,
        "no-extra-boolean-cast": 2,
        "no-extra-parens": [2, "functions"],
        "no-extra-semi": 2,
        "no-func-assign": 2,
        "no-invalid-regexp": 2,
        "no-irregular-whitespace": 2,
        "no-obj-calls": 2,
        "no-regex-spaces": 1,
        "no-sparse-arrays": 2,
        "no-unexpected-multiline": 2,
        "no-unreachable": 2,
        "no-unsafe-negation": 2,
        "use-isnan": 2,
        "valid-typeof": 2,

        "accessor-pairs": [2, { "getWithoutSet":true }],
        "block-scoped-var": 2,
        "curly": [2, "all"],
        "dot-location": [2, "property"],
        "eqeqeq": [2, "smart"],
        "no-alert": 2,
        "no-else-return": 2,
        "no-eval": 2,
        "no-extra-bind": 2,
        "no-fallthrough": 2,
        "no-floating-decimal": 2,
        "no-global-assign": 2,
        "no-implicit-globals": 2,
        "no-implied-eval": 2,
        "no-labels": 2,
        "no-multi-spaces": 2,
        "no-multi-str": 2,
        "no-new-func": 2,
        "no-octal-escape": 2,
        "no-octal": 2,
        "no-redeclare": 2,
        "no-return-assign": [2, "except-parens"],
        "no-script-url": 2,
        "no-self-assign": 2,
        "no-throw-literal": 2,
        "no-unused-labels": 2,
        "no-useless-call": 2,
        "no-useless-concat": 2,
        "no-void": 2,
        "no-with": 2,
        "radix": 2,
        "wrap-iife": [2, "inside"],
        "yoda": [2, "never", {}],

        "strict": [2,"function"],

        "no-delete-var": 2,
        "no-shadow": [2, { "builtinGlobals": false, "hoist": "functions", "allow": [] }],
        "no-shadow-restricted-names": 2,
        "no-undef": 2,
        "no-undef-init": 2,
        "no-unused-vars": 2,
        "no-use-before-define": [2, "nofunc"],

        "array-bracket-spacing": [2, "never"],
        "block-spacing": [2, "always"],
        "brace-style": [2, "stroustrup", { "allowSingleLine": false }],
        "comma-spacing": [2, { "before": false, "after": true }],
        "comma-style": [2, "last"],
        "computed-property-spacing": [2, "never"],
        "eol-last": 2,
        "func-call-spacing": [2, "never"],
        "id-match": [2, "^([A-Z])|([A-Z][a-z])|([a-z]+(([A-Z][a-z]+)|(__([A-Z][a-z]+)))*)$"],
        "indent": [2, 4, { "SwitchCase": 1 }],
        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
        "keyword-spacing": 2,
        "linebreak-style": [2, "unix"],
        "new-cap": 2,
        "new-parens": 2,
        "newline-after-var": [2, "always"],
        "newline-before-return": 2,
        "no-lonely-if": 2,
        "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
        "no-multiple-empty-lines": [2, { "max": 2 }],
        "no-nested-ternary": 2,
        "no-tabs": 1,
        "no-trailing-spaces": [2, { "skipBlankLines": false }],
        "no-whitespace-before-property": 2,
        "quote-props": [2, "as-needed", { "unnecessary": false }],
        "quotes": [1, "single"],
        "semi": [2, "always"],
        "semi-spacing": [2, { "before": false, "after": true }],
        "space-before-blocks": [2, "always"],
        "space-before-function-paren": [2, "never"],
        "space-infix-ops": 2,
        "wrap-regex": 2,

        "react/jsx-uses-vars": 2
    }
}


================================================
FILE: .gitignore
================================================
/coverage
/dist
/node_modules
npm-debug.log*


================================================
FILE: README.md
================================================
# A Dummy's Guide to Redux and Thunk in React

The demo app for my blog post. It is not an example of writing best-practice markup or React JavaScript, it's just the bare minimum to demonstrate how to use Redux and Redux Thunk.

## Prerequisites

[Node.js](http://nodejs.org/) >= v4 must be installed.

## Installation

- Running `npm install` in the app's root directory will install everything you need for development.

## Development Server

- `npm start` will run the app's development server at [http://localhost:3000](http://localhost:3000) with hot module reloading.

## Building

- `npm run build` creates a production build by default.

   To create a development build, set the `NODE_ENV` environment variable to `development` while running this command.

- `npm run clean` will delete built resources.


================================================
FILE: nwb.config.js
================================================
module.exports = {
  type: 'react-app'
}


================================================
FILE: package.json
================================================
{
  "name": "dummys-guide-to-redux-and-thunk-react",
  "version": "1.0.0",
  "description": "A Dummy's Guide to Redux and Thunk in React",
  "private": true,
  "scripts": {
    "build": "nwb build-react-app",
    "clean": "nwb clean-app",
    "start": "nwb serve-react-app"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.1.0",
    "eslint": "^3.10.0",
    "eslint-plugin-react": "^6.6.0",
    "nwb": "0.12.x"
  },
  "author": "",
  "license": "MIT",
  "repository": ""
}


================================================
FILE: public/.gitkeep
================================================


================================================
FILE: src/actions/items.js
================================================
export function itemsHasErrored(bool) {
    return {
        type: 'ITEMS_HAS_ERRORED',
        hasErrored: bool
    };
}

export function itemsIsLoading(bool) {
    return {
        type: 'ITEMS_IS_LOADING',
        isLoading: bool
    };
}

export function itemsFetchDataSuccess(items) {
    return {
        type: 'ITEMS_FETCH_DATA_SUCCESS',
        items
    };
}

export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}


================================================
FILE: src/components/ItemList.js
================================================
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { itemsFetchData } from '../actions/items';

class ItemList extends Component {
    componentDidMount() {
        this.props.fetchData('http://599167402df2f40011e4929a.mockapi.io/items');
    }

    render() {
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }

        return (
            <ul>
                {this.props.items.map((item) => (
                    <li key={item.id}>
                        {item.label}
                    </li>
                ))}
            </ul>
        );
    }
}

ItemList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    items: PropTypes.array.isRequired,
    hasErrored: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ItemList);


================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>A Dummy's Guide to Redux and Thunk in React</title>
    <style>body { font-family: sans-serif; }</style>
</head>

<body>
    <h1>A Dummy's Guide to Redux and Thunk in React</h1>
    <div id="app"></div>
</body>
</html>


================================================
FILE: src/index.js
================================================
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import ItemList from './components/ItemList';

const store = configureStore();

render(
    <Provider store={store}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
);


================================================
FILE: src/reducers/index.js
================================================
import { combineReducers } from 'redux';
import { items, itemsHasErrored, itemsIsLoading } from './items';

export default combineReducers({
    items,
    itemsHasErrored,
    itemsIsLoading
});


================================================
FILE: src/reducers/items.js
================================================
export function itemsHasErrored(state = false, action) {
    switch (action.type) {
        case 'ITEMS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

export function itemsIsLoading(state = false, action) {
    switch (action.type) {
        case 'ITEMS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

export function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}


================================================
FILE: src/store/configureStore.js
================================================
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}