Merge pull request #11 from xwartz/dev

rewrite reducers

src/components/channel/index.js

@@ -38,7 +38,11 @@ Channels.propTypes = {
   changeChannel: PropTypes.func.isRequired
 }
 
-const mapStateToProps = state => state
+const mapStateToProps = state => {
+  return {
+    channelId: state.channelId
+  }
+}
 
 const mapDispatchToProps = { changeChannel }
 

src/components/login/index.js

@@ -110,7 +110,9 @@ class Login extends Component {
 }
 
 const mapStateToProps = (state) => {
-  return state
+  return {
+    ...state.login
+  }
 }
 
 const mapDispatchToProps = { login, loginPop }

src/components/song/index.js

@@ -197,7 +197,13 @@ Song.propTypes = {
   isFetchingLyric: PropTypes.bool.isRequired
 }
 
-const mapStateToProps = state => state
+const mapStateToProps = state => {
+  return {
+    ...state.song,
+    channelId: state.channelId
+  }
+}
+
 const mapDispatchToProps = {
   nextSong,
   pauseSong,

src/containers/App.js

@@ -51,7 +51,12 @@ App.PropTypes = {
   channelId: PropTypes.number.isRequired
 }
 
-const mapStateToProps = state => state
+const mapStateToProps = state => {
+  return {
+    ...state.song,
+    channelId: state.channelId
+  }
+}
 
 const mapDispatchToProps = { fetchSongs }
 

src/index.js

@@ -8,32 +8,35 @@ import Root from './containers/Root'
 const localState = localStorage.getItem('state')
 
 const initialState = JSON.parse(localState) || {
-  // login
+  login: {
+    isPop: false,
+    errMsg: ''
+  },
   userInfo: {},
-  isPop: false,
-  errMsg: '',
   channelId: '0',
-  // 是否显示歌词
-  isShowLyric: false,
-  // 暂停/播放
-  pause: false,
-  // 当前歌曲索引
-  current: 0,
-  // 正在获取歌曲
-  isFetchingSong: false,
-  // 正在获取歌词
-  isFetchingLyric: false,
-  // 歌曲列表
-  songs: [{
-    singers: [{ id: '0', name: 'xwartz' }],
-    title: 'PupaFM',
-    album: '/subject/1458963/',
-    url: 'https://xwartz.github.com',
-    picture: 'https://img3.doubanio.com/lpic/s7052285.jpg',
-    like: false,
-    lyric: [],
-    sid: ''
-  }]
+  song: {
+    // 是否显示歌词
+    isShowLyric: false,
+    // 暂停/播放
+    pause: false,
+    // 当前歌曲索引
+    current: 0,
+    // 正在获取歌曲
+    isFetchingSong: false,
+    // 正在获取歌词
+    isFetchingLyric: false,
+    // 歌曲列表
+    songs: [{
+      singers: [{ id: '0', name: 'xwartz' }],
+      title: 'PupaFM',
+      album: '/subject/1458963/',
+      url: 'https://xwartz.github.com',
+      picture: 'https://img3.doubanio.com/lpic/s7052285.jpg',
+      like: false,
+      lyric: [],
+      sid: ''
+    }]
+  }
 }
 
 const store = configureStore(initialState)

src/reducers/channelId.js

@@ -0,0 +1,16 @@
+'use strict'
+
+import { CHANGE_CHANNEL } from '../actions/types'
+
+const initialState = '0'
+
+const channelId = (state = initialState, action) => {
+  switch (action.type) {
+    case CHANGE_CHANNEL:
+      return action.channelId
+    default:
+      return state
+  }
+}
+
+export default channelId

src/reducers/index.js

@@ -1,80 +1,17 @@
 'use strict'
 
-// import { combineReducers } from 'redux'
-
-import { assign, parseLyric } from '../utils'
-
-import {
-  DO_NEVER, DO_LIKE, DO_NEXT, DO_PAUSE,
-  REQUEST_SONGS, RECEIVE_SONGS, REQUEST_MORE, RECEIVE_MORE,
-  SHOW_LYRIC, REQUEST_LYRIC, RECEIVE_LYRIC,
-  CHANGE_CHANNEL,
-  RECEIVE_LOGIN,
-  SHOW_LOGIN,
-  ERROR_LOGIN,
-  REQUEST_LOGOUT
-} from '../actions/types'
-
-const rootReducer = (state, action) => {
-  const { songs, current, pause, isShowLyric, isPop } = state
-
-  switch (action.type) {
-    case DO_NEVER:
-      return Object.assign({}, state, {
-        songs: songs.filter((song, index) => index !== current),
-        pause: false
-      })
-
-    case DO_LIKE:
-      return Object.assign({}, state, {
-        songs: songs.map((song, index) =>
-          index === current ? assign(song, { like: !song.like }) : song)
-      })
-
-    case DO_PAUSE:
-      return assign(state, { pause: !pause })
-
-    case DO_NEXT:
-      return assign(state, { pause: false }, { current: current + 1 })
-
-    case RECEIVE_SONGS:
-      return assign(state, { current: 0 }, { songs: action.songs })
-
-    case RECEIVE_MORE:
-      return assign(state, { songs: [...songs, ...action.songs] })
-
-    case SHOW_LYRIC:
-      return assign(state, { isShowLyric: !isShowLyric })
-
-    case RECEIVE_LYRIC:
-      return assign(state, { isFetchingLyric: false },
-        { songs: songs.map((song, index) =>
-            index === current ? assign(song,
-              { lyric: parseLyric(action.lyric) }) : song)
-        }
-      )
-
-    case REQUEST_LYRIC:
-      return assign(state, { isFetchingLyric: true })
-    case REQUEST_SONGS:
-    case REQUEST_MORE:
-      return state
-
-    case CHANGE_CHANNEL:
-      return assign(state, { channelId: action.channelId })
-
-    case RECEIVE_LOGIN:
-      return assign(state, { userInfo: action.userInfo, errMsg: '' })
-    case SHOW_LOGIN:
-      return assign(state, { isPop: !isPop })
-    case ERROR_LOGIN:
-      return assign(state, { errMsg: action.errMsg })
-    case REQUEST_LOGOUT:
-      return assign(state, { userInfo: {} })
-
-    default:
-      return state
-  }
-}
+import { combineReducers } from 'redux'
+
+import login from './login'
+import userInfo from './user'
+import channelId from './channelId'
+import song from './song'
+
+const rootReducer = combineReducers({
+  login,
+  userInfo,
+  channelId,
+  song
+})
 
 export default rootReducer

src/reducers/login.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { assign } from '../utils'
+import { SHOW_LOGIN, ERROR_LOGIN } from '../actions/types'
+
+const initialState = {
+  isPop: false,
+  errMsg: ''
+}
+
+const login = (state = initialState, action) => {
+  const { isPop } = state
+  switch (action.type) {
+    case SHOW_LOGIN:
+      return assign(state, { isPop: !isPop })
+    case ERROR_LOGIN:
+      return assign(state, { errMsg: action.errMsg })
+    default:
+      return state
+  }
+}
+
+export default login

src/reducers/song.js

@@ -0,0 +1,85 @@
+'use strict'
+
+import { assign, parseLyric } from '../utils'
+
+import {
+  DO_NEVER, DO_LIKE, DO_NEXT, DO_PAUSE,
+  REQUEST_SONGS, RECEIVE_SONGS, REQUEST_MORE, RECEIVE_MORE,
+  SHOW_LYRIC, REQUEST_LYRIC, RECEIVE_LYRIC
+} from '../actions/types'
+
+const initialState = {
+  // 是否显示歌词
+  isShowLyric: false,
+  // 暂停/播放
+  pause: false,
+  // 当前歌曲索引
+  current: 0,
+  // 正在获取歌曲
+  isFetchingSong: false,
+  // 正在获取歌词
+  isFetchingLyric: false,
+  // 歌曲列表
+  songs: [{
+    singers: [{ id: '0', name: 'xwartz' }],
+    title: 'PupaFM',
+    album: '/subject/1458963/',
+    url: 'https://xwartz.github.com',
+    picture: 'https://img3.doubanio.com/lpic/s7052285.jpg',
+    like: false,
+    lyric: [],
+    sid: ''
+  }]
+}
+
+const song = (state = initialState, action) => {
+  const { songs, current, pause, isShowLyric } = state
+
+  switch (action.type) {
+    case DO_NEVER:
+      return Object.assign({}, state, {
+        songs: songs.filter((song, index) => index !== current),
+        pause: false
+      })
+
+    case DO_LIKE:
+      return Object.assign({}, state, {
+        songs: songs.map((song, index) =>
+          index === current ? assign(song, { like: !song.like }) : song)
+      })
+
+    case DO_PAUSE:
+      return assign(state, { pause: !pause })
+
+    case DO_NEXT:
+      return assign(state, { pause: false }, { current: current + 1 })
+
+    case RECEIVE_SONGS:
+      return assign(state, { current: 0 }, { songs: action.songs })
+
+    case RECEIVE_MORE:
+      return assign(state, { songs: [...songs, ...action.songs] })
+
+    case SHOW_LYRIC:
+      return assign(state, { isShowLyric: !isShowLyric })
+
+    case RECEIVE_LYRIC:
+      return assign(state, { isFetchingLyric: false },
+        { songs: songs.map((song, index) =>
+            index === current ? assign(song,
+              { lyric: parseLyric(action.lyric) }) : song)
+        }
+      )
+
+    case REQUEST_LYRIC:
+      return assign(state, { isFetchingLyric: true })
+    case REQUEST_SONGS:
+    case REQUEST_MORE:
+      return state
+
+    default:
+      return state
+  }
+}
+
+export default song

src/reducers/user.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { RECEIVE_LOGIN, REQUEST_LOGOUT } from '../actions/types'
+
+const initialState = {}
+
+const userInfo = (state = initialState, action) => {
+  switch (action.type) {
+    case RECEIVE_LOGIN:
+      return action.userInfo
+    case REQUEST_LOGOUT:
+      return {}
+    default:
+      return state
+  }
+}
+
+export default userInfo