Skip to content

Commit 40e6a37

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

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)

‎src/index.css

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

‎src/index.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import { Provider } from 'react-redux'
4+
import { createStore } from 'redux'
65

7-
ReactDOM.render(<App />, document.getElementById('root'));
6+
import App from './components/App'
7+
import './styles/index.css'
8+
import reducers from './reducers'
89

9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
serviceWorker.unregister();
10+
ReactDOM.render((
11+
<Provider store={createStore(reducers)}>
12+
<App />
13+
</Provider>
14+
), document.getElementById('root'))

‎src/logo.svg

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

‎src/reducers/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { combineReducers } from 'redux'
2+
3+
const songs = [
4+
{ title: 'Mo Scrubs', duration: '4:05' },
5+
{ title: 'Fuck the bath', duration: '2:05' },
6+
{ title: 'Shame on the writer', duration: '5:10' },
7+
{ title: 'Let me love you', duration: '3:23' }
8+
]
9+
10+
const songsReducer = () => {
11+
return songs
12+
}
13+
14+
const selectedSongReducer = (selectedSong = songs[0], action) => {
15+
if (action.type === 'SONG_SELECTED') return action.payload
16+
return selectedSong
17+
}
18+
19+
export default combineReducers({
20+
songs: songsReducer,
21+
selectedSong: selectedSongReducer
22+
})

0 commit comments

Comments
 (0)