Scribd
Upload
2 views

Redux

The document outlines the steps to set up a React-Redux application named 'reduxdemo' including creating components for AC and TV, and their respective actions and reducers. It provides code snippets for the AcContainer and TvContainer components, as well as the action and reducer files for managing state related to air conditioners and televisions. Finally, it mentions starting the application on port 3000 after installation and setup.

Uploaded by

Prudhvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Redux

The document outlines the steps to set up a React-Redux application named 'reduxdemo' including creating components for AC and TV, and their respective actions and reducers. It provides code snippets for the AcContainer and TvContainer components, as well as the action and reducer files for managing state related to air conditioners and televisions. Finally, it mentions starting the application on port 3000 after installation and setup.

Uploaded by

Prudhvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

npx create-react-ap reduxdemo


2. npx create-reatct-app react-redux
2. cd F:\mswd\reduxdemo
3. check the node version
4. Add this to VSC
4. npm install redux
5. add reduxdemo to vsc
6. in reduxdemo directory create Components folder
a) Now create acContainer.js
b) TVContainer.js
7. in reduxdemo create another folder named redux.
create subfolder
a) AC
1. acAction.js
2. acreducer.js
3. acTypes.js
b) TV
1. tvAction.js
2. tvreducer.js
3. tvTypes.js
8. F:\mswd\reduxdemo> npm start
9. Now new window will open with port no 3000

Components:
__________

1. AcOntainer.js

mport React from 'react'


import { connect } from 'react-redux'
import { buyAC } from '../redux/AC/Acaction'

function AcContainer(props) {
return (
<div>
<h2>No of ACS : {props.noOfACS}</h2>
<button onClick={props.buyAC}>Buy AC</button>
</div>
)
}

const mapStateToProps = state => {


return {
noOfACS : state.ac.noOfACS
}
}

const mapDispatchToPorps = dispatch => {


return {
buyAC: () => dispatch(buyAC())
}
}

export default connect(


mapStateToProps,
mapDispatchToPorps
)(AcContainer)

2. TVcontainer.js
_________________

import React from 'react'


import { connect } from 'react-redux'
import { buyTV } from '../redux/TV/Tvaction'

function TvContainer(props) {
return (
<div>TvContainer
<h2>No of TVS : {props.noOfTVS}</h2>
<button onClick={props.buyTV}>Buy TV</button>
</div>
)
}

const mapStateToProps = state => {


return {
noOfTVS : state.tv.noOfTVS
}
}

const mapDispatchToPorps = dispatch => {


return {
buyTV: () => dispatch(buyTV())
}
}

export default connect(


mapStateToProps,
mapDispatchToPorps
)(TvContainer)

Redux
________

AC:
1. ACaction.js
import { BUY_AC } from "./Actypes"

export function buyAC() {


return {
type : BUY_AC
}
}

2. Acreducer.js
import { BUY_AC } from "./Actypes"
const initialState = {
noOfACS : 20
}
const acreducer = (state = initialState, action) => {
switch(action.type) {
case BUY_AC : return {
...state,
noOfACS : state.noOfACS-1
}
default : return state
}
}

export default acreducer


3. AcTypes.js

export const BUY_AC = 'BUY_AC'

TV:
1. TVaction.js

import { BUY_TV } from "./Tvtypes"

export function buyTV() {


return {
type : BUY_TV
}
}
2. TVreducer.js
import { BUY_TV } from "./Tvtypes"

const initialState = {
noOfTVS : 10
}
const tvreducer = (state = initialState, action) => {
switch(action.type) {
case BUY_TV : return {
...state,
noOfTVS : state.noOfTVS-1
}
default : return state

export default tvreducer

3. TVTypes.js
export const BUY_TV = 'BUY_TV'

You might also like