Using redux in reactjs basic tutorial

Including react libraries


<html>
<head>
</head>

<body>
  <div id="app">
  </div>
</body>
<script>

const niravModiInstructions = (balance = {amount: 11000, name: "Nirav Modi"}, action) => {
    switch (action.type) {
        case "ABORT":
         return {amount: 0, name: "Nirav Modi"}
        default:
            return balance;
    }
};
const swissBankAccount = Redux.createStore(niravModiInstructions)        

console.log('balance', swissBankAccount.getState() )
swissBankAccount.dispatch({type: "ABORT"}
console.log('balance', swissBankAccount.getState() )
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>

<!-- libraries added here -->

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.js"></script>
</html>

Here I have included 3 libraries (react, react-dom and react-redux) in addition to the redux library

Writing simple react code


<html>
<head>
</head>

<body>
  <div id="app">
  </div>
</body>
<script>

const niravModiInstructions = (balance = {amount: 11000, name: "Nirav Modi"}, action) => {
    switch (action.type) {
        case "ABORT":
         return {amount: 0, name: "Nirav Modi"}
        default:
            return balance;
    }
};
const swissBankAccount = Redux.createStore(niravModiInstructions)        

console.log('balance', swissBankAccount.getState() )
swissBankAccount.dispatch({type: "ABORT"}
console.log('balance', swissBankAccount.getState() )
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.js"></script>

<script type="text/babel">
      function SimpleComponent(props) {
          const ele = <h1> hello - {props.amount}</h1>
          return ele;
      }
      const InjectedComponent = ReactRedux.connect((state) => ({
          amount: state.amount
      }))(SimpleComponent)
      const Provider = ReactRedux.Provider;
      ReactDOM.render(<Provider store={swissBankAccount}><InjectedComponent /></Provider>, document.getElementById("app"))
  </script>
</html>

Here the "Provider" component will inject to the store too all the children, and grandchildren of it. Then a specific component can be connected to a store using the "connect" function.