React Redux Tutorials - 14 - React Redux Setup

3705 단어 reduxredux

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;

좋은 웹페이지 즐겨찾기