Reducer connect #55

app/App/App.js

@@ -3,19 +3,31 @@ import styles from './App.css';
 import History from '../History/History.js';
 import Queue from '../Queue/Queue.js';
 import Header from '../Header/Header.js';
+import { connect } from 'react-redux';
 
-export default class App extends React.Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
+    const { queueSonglist } = this.props;
     return (
       <div className={styles.app}>
         <Header />
         <History />
-        <Queue />
+        <Queue queueSonglist={queueSonglist} />
       </div>
 
     );
   }
 }
+
+// Get the items from state
+function select(state) {
+  return {
+    queueSonglist: state.queueSonglist
+  };
+}
+
+// Wrap the component to inject dispatch and state into it
+export default connect(select)(App);

app/Queue/Queue.js

@@ -5,12 +5,14 @@ import QueueSonglist from '../QueueSonglist/QueueSonglist';
 export default class Queue extends React.Component {
   constructor(props) {
     super(props);
+
+    this.songlist = this.props.queueSonglist;
   }
 
   render() {
     return (
         <div className={styles.queue}>
-          <QueueSonglist songs={['song-one', 'song-two']} />
+          <QueueSonglist songs={this.songlist} />
         </div>
     );
   }

app/reducer.js

@@ -1,17 +1,19 @@
-import {List} from 'immutable';
 import { combineReducers } from 'redux';
 
-function queue(state = List(), action) {
+function queueSonglist(state = [], action) {
   switch (action.type) {
   case 'ADD_SONG':
-    return state.push(action.item);
+    return [
+      ...state,
+      action.song
+    ];
   default:
     return state;
   }
 }
 
 const partyqApp = combineReducers({
-  queue
+  queueSonglist
 });
 
 export default partyqApp;

app/test/reducer_spec.js

@@ -1,22 +1,18 @@
-import {List, Map, fromJS} from 'immutable';
 import {expect} from 'chai';
 
 import reducer from '../reducer';
 
 describe('reducer', () => {
-  it('handles SET_STATE', () => {
-    const initialState = Map();
+  it('handles ADD_SONG', () => {
     const action = {
-      type: 'SET_STATE',
-      state: Map({
-        items: List.of('item-one', 'item-two')
-      })
+      type: 'ADD_SONG',
+      song: 'song-one'
     };
 
-    const nextState = reducer(initialState, action);
+    const nextState = reducer(undefined, action);
 
-    expect(nextState).to.equal(fromJS({
-      items: List.of('item-one', 'item-two')
-    }));
+    expect(nextState).to.deep.equal({
+      queueSonglist: ['song-one']
+    });
   });
 });

package.json

@@ -7,7 +7,7 @@
     "start": "babel-node index.js",
     "test:server": "mocha --compilers js:babel/register --require ./server/test/test_helper.js --recursive 'server/test/**/*.@(js|jsx)'",
     "test:client": "mocha --compilers js:babel-core/register --require ./app/test/test_helper.js --recursive 'app/test/**/*.@(js|jsx)'",
-    "test": "npm run test:server",
+    "test": "npm run test:server && npm run test:client",
     "test:server-watch": "npm run test:server -- --watch",
     "test:client-watch": "npm run test:client -- --watch",
     "test:watch": "npm run test -- --watch",