advanced-redux-pattern

index.js

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import List from "antd/lib/list";
import Icon from "antd/lib/icon";
import store from "./redux/store";
import SampleModule from "./containers/sample-module";

import "antd/dist/antd.css";
import "./styles.css";

const data = ["Scalable", "Reusable", "Maintainable", "Multiple dispatch"];

function App() {
  return (
    <div className="App">
      <h1>Advanced Redux Pattern</h1>
      <p>
        Using redux, redux-observables, rxjs, react-actions, middleware,
        ant-design
      </p>
      <List
        size="small"
        bordered
        dataSource={data}
        renderItem={item => (
          <List.Item>
            <Icon className="icon" type="check-circle" theme="outlined" />
            {item}
          </List.Item>
        )}
      />
      <div className="button-list">
        <SampleModule />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

package.json

{
  "name": "advanced-redux-pattern",
  "version": "1.0.0",
  "description": "Advanced redux pattern for handling multiple sub dispatch, reusable middleware and scalable redux for large application.",
  "keywords": [
    "redux",
    "redux-observables",
    "advanced-pattern",
    "middleware"
  ],
  "author": "nenjotsu",
  "main": "src/index.js",
  "dependencies": {
    "antd": "3.10.1",
    "query-string": "6.2.0",
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-redux": "5.0.7",
    "react-scripts": "2.0.3",
    "redux": "3.6.0",
    "redux-actions": "2.6.1",
    "redux-observable": "0.17.0",
    "rxjs": "5.5.6"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

.icon {
  margin-right: 10px;
  margin-top: 4px;
  color: green;
}

.button-list {
  margin-top: 10px;
}

.btn {
  margin-right: 5px;
}

.data-list {
  margin-top: 10px;
}

.spin-container {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}