react----redux分模块

作者: 二营长家的张大炮 | 来源:发表于2019-11-12 20:32 被阅读0次

react----redux分模块
vuex分模块
CommonJS
amd
vue分模块打包
【IDEA】搭建聚合项目抛Unable to find main
教师资格证┃综合素质高频考点
1.前端用户模块- 上篇
vuex使用方法简述
【IDEA】解决maven多工程项目"找不到符号"问题

image.png

这是我的文件结构
models文件夹下是各个模块
通过models/index.js向外暴露

models/music.js

/**
 * 这是底部播放插件数据存储
 */
import {
    GET_CURRENT_SONG,
    GET_SONG_LIST,
    SET_CURRENT_SONG,
    SET_SONG_LIST
} from '../actionTypes'

const defaultValue = {
    song: {
        id:"1111",
        musicname:"拼嘻嘻音乐",
        singername:"拼嘻嘻音乐",
        pic:""
    },
    musiclist: []
}

const musicReducer = (state = defaultValue, action) => {
       const newState = JSON.parse(JSON.stringify(state));
    switch (action.type) {
        case SET_CURRENT_SONG:
            newState.song = action.data
            return newState
        case SET_SONG_LIST:
            newState.musiclist = action.data
            return newState
        default:
            return newState
    }
}

export default musicReducer

models/index.js

import {
    combineReducers
} from 'redux'
import {
    routerReducer as routing
} from 'react-router-redux'

/**
 * Store 通常要和 Reducer 来配合使用，Store 存数据，Reducer 是个纯函数，它接收并更新数据。
 */
import MenuReducer from './menu'
import musicReducer from './music'

export default combineReducers({
    routing,
    config: (state = {}) => state,
    musicReducer,
    MenuReducer
})

这里需要安装react-router-redux依赖

store/actionTypes.js
存放需要用到的常量

// menu
export const GET_MENU_LIST = 'getmenulist'

/**
 *  song & musicplay
 */
// 获取当前播放歌曲
export const GET_CURRENT_SONG = 'getcurrentsong'
// 获取当前播放列表
export const GET_SONG_LIST = 'getsonglist'
// 设置当前播放歌曲
export const SET_CURRENT_SONG = 'setcurrentsong'
// 设置当前播放列表
export const SET_SONG_LIST = 'setsonglist'

store/index.js

import {
    createStore
} from 'redux' // 引入createStore

// import reducer from './reducer'
import rootReducer from './models/index'

const store = createStore(rootReducer) // 创建数据存储仓库

export default store // 向外暴露

那么如何获取到redux存储的数据以及如何修改数据呢？
第一步我们先在程序入口引入store
index.js

// 引入store
import {
    Provider
} from "react-redux";
import store from './store/index'

import RouterConfig from './router/index.js';
ReactDOM.render(
    <Provider store={store}><RouterConfig /></Provider>
    , document.getElementById('root'));

Aside.js中获取数据

import { connect } from 'react-redux'


// stateToProps---隐射关系
const stateToProps = (state) => {
    return {
        menulist: state.MenuReducer.menulist
    }
}

// dispatchToProps---分发
const dispatchToProps = (dispatch) => {
    return {

    }
}

export default connect(stateToProps, dispatchToProps)(withRouter(Aside))

const dispatchToProps = (dispatch) => {
    return {
        /**
     * 歌曲播放
     */
        playMusic(tracks,id, musicname, singername, pic) {
            const songaction = {
                type: SET_CURRENT_SONG,
                data: { id, musicname, singername, pic }
            }
            let list = tracks.map(item => {
                return { id: item.id, musicname: item.al.name, singername: item.ar[0].name, pic: item.al.picUrl }
            })
            const musiclistaction = {
                type: SET_SONG_LIST,
                data: list
            }
            dispatch(songaction)
            dispatch(musiclistaction)
        }
    }
}