redux篇--入门使用

Mr_yao81043
192 阅读3分钟

记一次redux入门使用之路

前言...

最近公司项目告一段落，闲暇之余深感双手离开键盘的痛苦（快乐）。。准备找点其他的坑去入（让人知道你没闲着）。就开始了react之路。正好在练手的某个阶段，需要用到全局状态管理，总所周知vue有vuex，react搭配的时redux(没吃过猪肉，还是看过猪跑的),就去百度了redux的网址https://www.redux.org.cn/ 开始看，表示有可能第一次看我是有点蛋疼的，总是没能正确用起来，后面理解了。就记录下这次经历，希望能帮到其他人，也给自己留个记录！

需求

项目里面有一个全局通用的音频播放组件，需要在每个页面共享。

正文

首先我们心中会有一个大概的布局是这样的（根据vue的使用经验）

那么我们具体实现：

第一

首先播放器共享了3个状态：当前音乐播放信息，当前音乐播放地址，当前是否处于播放状态 ; 
type.js
// 更新音乐播放地址
export const UPDATE_MUSIC_TYPE = 'UPDATE_MUSIC_PALYER'

reducer.js
import { UPDATE_MUSIC_TYPE } from "./types";
//新建一个reducer，用来更新/初始化store中的state

//初始播放器的共享状态
const playerDefault = {
    url : '',
    inof:{},
    play:false
}

//根据action动作改变store中的state，action内容下面有介绍,
//如果action.type未知(动作不明确)，返回上一个状态下的state
export function updateMusicUrl(state = playerDefault,action){
    console.log(state,action)
    switch(action.type){
        case UPDATE_MUSIC_TYPE:
        return {
            ...action.data,
        }
        default:
        return state;    // 返回旧状态
    }
}

第二

初始化store，并暴露给外部 

store.js
import { createStore } from "redux"
import { updateMusicUrl } from "./reducer"

//注册store，相当于初始化store中的state,并暴露给外布
let store = createStore(updateMusicUrl)
export default store;

下面是首次注册是调用的console结果，因为没有主动的action触发，所以返回的是我们初始化的state 这里完美诠释上面提到的：（如果action.type未知(动作不明确)，返回上一个状态下的state）

第三

ok，现在写一个action来触发更新store的状态,因为redux刷新会重置store中的状态为初始状态，所以这里搭配使用sessionStorage 

action.js

import { UPDATE_MUSIC_TYPE } from "./types";

//申明对谁动作，由type定义，且是必须,附带需要更新的数据

export function musicAction(data){
    window.sessionStorage.setItem('url',data.url)
    window.sessionStorage.setItem('paly',true)
    window.sessionStorage.setItem('info',JSON.stringify(data.info))
    return{
        type:UPDATE_MUSIC_TYPE,
        data:data
    }
}

第四

页面应用redux，触发修改 

list.js

import store from "../../store/store";
import { musicAction } from "../../store/action";
/**
     * 播放音乐-获取音乐播放地址
     * @param {*} musicInfo :歌曲id
     * @param {*} j :歌曲索引
     */
    playMusic(musicInfo,j){
        console.log(musicInfo,j)
        // 获取歌曲播放地址
        httpRequest('GET','/song/url',{id:musicInfo.id})
        .then(res =>{
            console.log(res)
            let data = res.data;
            this.setState({
                songsUrl : data.data[0].url,
                activeIndex : j
            })
            let musicOpt = {
                info:musicInfo,
                url : data.data[0].url,
                play:true
            }
            store.dispatch(musicAction(musicOpt))
        })
    }
获取数据,同时监听state变化 
```
player.js

import store from "../../store/store";

/**
 * 音乐播放器组件
 */
class Player extends React.Component{
    constructor(props){
        super(props)
        // 缓存最后一次播放的曲目信息
        const _songUrl = window.sessionStorage.getItem('url');
        const _songInfo = window.sessionStorage.getItem('info');
        const _isPlay = window.sessionStorage.getItem('play') ? window.sessionStorage.getItem('play') : false;
        this.state = {
            url:_songUrl ? _songUrl : '',
            info:JSON.parse(_songInfo) ? JSON.parse(_songInfo) : {},
            play:_isPlay,
            process:0
        }
        this.watchMusicUpdate()
        this.playMusic = this.playMusic.bind(this)
    }
    /**
     * 监听播放器音乐及曲目变化
     */
    watchMusicUpdate(){
        // 监听state状态改变
        store.subscribe(() => {
            const states = store.getState();
            console.log(states)
            this.setState({
                url : states.url,
                info: states.info,
                play:states.play,
            })
            if (this.state.url) {
                // 播放背景音乐
                this.refs.audio1.play()
                // 监听音乐播放进度
                this.watchMusicProcess(this.refs.audio1)
            }
            else {
                console.log('获取歌曲失败')
                // 暂停背景音乐
                this.refs.audio1.pause()
            }
        })
    }
```
写下这篇文章是由于那天真的很蒙蔽，一直没能理解action,action函数，reducer函数的作用，估计是没看清楚文档文字也有可能，今天再翻了一此文档，有感而发，匆匆记录一下自己的浅显理解。希望对别人能有帮助，哈哈 ！(其实总结一句话，文档的大纲顺序怪怪的，先介绍action,再是store，再是reducer，没能很好的串在一起)
avatar
文章
阅读
粉丝