Redux: basic implementation with one action

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-router-dom": "^4.1.1"
+    "react-redux": "^5.0.5",
+    "react-router-dom": "^4.1.1",
+    "redux": "^3.6.0"
   },
   "devDependencies": {
     "enzyme": "^2.8.2",

src/actions/appActions.js

@@ -0,0 +1,11 @@
+const likePicture = (pictureIndex) => {
+  console.log(`LIKE ${pictureIndex}!`)
+  return {
+    type: 'LIKE_PICTURE',
+    pictureIndex
+  }
+}
+
+export {
+  likePicture
+}

src/index.js

@@ -1,9 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import {createStore} from 'redux'
+import {Provider} from 'react-redux'
 import App from './App'
+import reducers from './reducers'
 import './index.css'
 
+const store = createStore(reducers)
+
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('mountMyApp')
 )

src/pages/Pictures.css

@@ -19,6 +19,15 @@
   font-weight: 400;
 }
 
+.Picture-like {
+  padding: 5px;
+}
+
+.Picture-like > span {
+  display: block;
+  padding: 6px 10px;
+}
+
 .Picture > a {
   display: block;
 }

src/pages/Pictures.js

@@ -1,35 +1,66 @@
-import React from 'react'
+import React, {Component} from 'react'
 import {Link} from 'react-router-dom'
-import pictures from '../sampleData/pictures'
+import {connect} from 'react-redux'
+import {likePicture} from '../actions/appActions'
 import './Pictures.css'
 
-const RenderPictures = (picturesList) => {
-  return picturesList.map((picture, index) => {
-    return (
-      <div className="Picture" key={`MyPicture_${index}`}>
-        <Link to={`/picture/${index}`}>
-          <img src={picture.url} alt={picture.name}/>
-        </Link>
-        <div className="Picture-name">{picture.name}</div>
-      </div>
-    )
-  })
-}
+export class Pictures extends Component {
 
-const Pictures = () => {
-  return {
-    render: () => {
+  onLike = (index, event) => {
+    event.preventDefault()
+    this.props.onLikePicture(index)
+  }
+
+  renderPictures(picturesList) {
+
+    return picturesList.map((picture, index) => {
       return (
-        <div className="app-content-width">
-          <article>
-            <h2>Pictures</h2>
-            <p>Simple picture gallery.</p>
-            <div className="Pictures-gallery">{RenderPictures(pictures)}</div>
-          </article>
+        <div className="Picture" key={`MyPicture_${index}`}>
+          <Link to={`/picture/${index}`}>
+            <img src={picture.url} alt={picture.name}/>
+          </Link>
+          <div className="Picture-name">{picture.name}</div>
+          <div className="Picture-like">
+            {index !== this.props.liked
+              ? <button onClick={this.onLike.bind(this, index)}>Like</button>
+              : <span>Liked! This is my favourite now.</span>
+            }
+          </div>
         </div>
       )
-    }
+    })
+  }
+
+  render() {
+    const { pictures } = this.props
+    return (
+      <div className="app-content-width">
+        <article>
+          <h2>Pictures</h2>
+          <p>Simple picture gallery. Last like index: {this.props.liked}</p>
+          <div className="Pictures-gallery">
+            {this.renderPictures(pictures)}
+          </div>
+        </article>
+      </div>
+    )
   }
 }
 
-export default Pictures
+const mapStateToProps = (state) => ({
+  liked: state.appReducer.liked,
+  pictures: state.appReducer.pictures
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onLikePicture: (pictureIndex) => {
+    dispatch(likePicture(pictureIndex))
+  }
+})
+
+const ConnectedPictures = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Pictures)
+
+export default ConnectedPictures

src/reducers/appReducer.js

@@ -0,0 +1,20 @@
+import pictures from '../sampleData/pictures'
+
+const defaultState = {
+  pictures: pictures,
+  liked: -1
+}
+
+const appReducer = (state = defaultState, action) => {
+  switch (action.type) {
+    case "LIKE_PICTURE":
+      return {
+        ...state,
+        liked: action.pictureIndex
+      }
+    default:
+      return state
+  }
+}
+
+export default appReducer

src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import appReducer from './appReducer'
+
+const reducers = combineReducers({
+  appReducer // ..., anotherReducer, moreReducers
+})
+
+export default reducers