React Redux Tutorials - 14 - React Redux Setup

Cake Shop App

---

• Our application is a simple react application.
• The state of the application is maintained seperately in the redux store.
• Our application is always subscribed to this redux store.
• The app can not directly update the state.
• If the app wants to update the state, it has to emit or dispatch an action.
• Once an action has dispatched, the reducer that handles that action and updates the current state.
• As soon as the state updated, the value is then passed to the application because the app is subscribed to the store.

Implement this scenario with React.

Set up the project

$ npx create-react-app react-redux-demo
$ npm install redux react-redux

CakeContainer.js

import React from 'react'

function CakeContainer() {
  return (
    <div>
      <h2>Number of cakes</h2>
      <button>Buy Cake</button>
    </div>
  )
}

export default CakeContainer

App.js

import React from 'react';
import CakeContainer from './components/CakeContainer';

function App() {
  return (
    <div className="App">
      <CakeContainer />
    </div>
  );
}

export default App;