Skip to content

Commit 40e6a37

Browse files
kumarabhirupkumarabhirup
committed
🚀 RELEASE: React-Redux Basic Example
1 parent 87cdd93 commit 40e6a37

File tree

16 files changed

+12853
-234
lines changed

16 files changed

+12853
-234
lines changed

‎package-lock.json

Lines changed: 12698 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
"dependencies": {
66
"react": "^16.8.6",
77
"react-dom": "^16.8.6",
8-
"react-scripts": "3.0.1"
8+
"react-redux": "^7.0.3",
9+
"react-scripts": "3.0.1",
10+
"redux": "^4.0.1"
911
},
1012
"scripts": {
1113
"start": "react-scripts start",

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
67
<meta name="viewport" content="width=device-width, initial-scale=1" />
78
<meta name="theme-color" content="#000000" />
89
<!--

‎src/App.css

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/App.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/App.test.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/actions/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Action Creator [selectSong]
2+
export const selectSong = song => {
3+
return {
4+
type: 'SONG_SELECTED',
5+
payload: song
6+
}
7+
}

‎src/components/App.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react'
2+
import SongsList from './SongsList'
3+
import SongDetail from './SongDetail'
4+
5+
class App extends Component {
6+
render() {
7+
return (
8+
<div className="ui container grid">
9+
<div className="ui row">
10+
<div className="column eight wide">
11+
<SongsList />
12+
</div>
13+
<div className="column eight wide">
14+
<SongDetail />
15+
</div>
16+
</div>
17+
</div>
18+
)
19+
}
20+
}
21+
22+
export default App

‎src/components/SongDetail.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import { connect } from 'react-redux'
3+
4+
const SongDetail = ({ selectedSong: { title, duration } }) => {
5+
return (
6+
<div>
7+
<h3>Details for:</h3>
8+
<p>
9+
Title: {title}
10+
<br />
11+
Duration: {duration}
12+
</p>
13+
</div>
14+
)
15+
}
16+
17+
const mapStateToProps = ({ selectedSong }) => {
18+
return {
19+
selectedSong
20+
}
21+
}
22+
23+
export default connect(mapStateToProps)(SongDetail)

‎src/components/SongsList.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { Component } from 'react'
2+
import { connect } from 'react-redux'
3+
4+
import { selectSong } from '../actions'
5+
6+
class SongsList extends Component {
7+
constructor(props) {
8+
super(props)
9+
this.renderList = this.renderList.bind(this)
10+
this.isSongSelected = this.isSongSelected.bind(this)
11+
}
12+
13+
renderList() {
14+
return this.props.songs.map((song, index) => (
15+
<article className="item" key={index}>
16+
<div className="right floated content">
17+
<button
18+
className={`ui button ${this.isSongSelected(song) ? "success" : "primary"}`}
19+
onClick={() => this.props.selectSong(song)}
20+
>
21+
{ this.isSongSelected(song) ? "Selected" : "Select" }
22+
</button>
23+
</div>
24+
<div className="content">
25+
{ song.title }
26+
</div>
27+
</article>
28+
))
29+
}
30+
31+
isSongSelected({ title }) {
32+
try {
33+
return this.props.selectedSong.title === title ? true : false
34+
} catch (err) {
35+
return false
36+
}
37+
}
38+
39+
render() {
40+
return (
41+
<section className="ui divided list">
42+
{ this.renderList() }
43+
</section>
44+
)
45+
}
46+
}
47+
48+
const mapStateToProps = ({ songs, selectedSong }) => {
49+
return {
50+
songs,
51+
selectedSong
52+
}
53+
}
54+
55+
export default connect(
56+
mapStateToProps,
57+
{
58+
// Action Creators
59+
selectSong
60+
}
61+
)(SongsList)

0 commit comments

Comments
 (0)