[Shanda conference] project introduces Redux

Preface

React Using a one-way data flow , In order to realize data flow, it is shared among different components , I introduced... For the project Redux Perform global data state management .

Installation dependency

Installation is required first redux Core dependence ：

yarn add @reduxjs/toolkit

Define activities

We are src/Utils Create a new folder under Store, Create a new file actions.js .

/** * action  type  */
export const UPDATE_AVAILABLE_VIDEO_DEVICES = 'UPDATE_AVAILABLE_VIDEO_DEVICES'
export const UPDATE_AVAILABLE_AUDIO_DEVICES = 'UPDATE_AVAILABLE_AUDIO_DEVICES'
export const EXCHANGE_VIDEO_DEVICE = 'EXCHANGE_VIDEO_DEVICE'
export const EXCHANGE_AUDIO_DEVICE = 'EXCHANGE_AUDIO_DEVICE'

/** *  Other constants  */
export const DEVICE_TYPE = {
    
    VIDEO_DEVICE: 'video',
    AUDIO_DEVICE: 'audio'
}

/** * action  Activities  */
export function updateAvailableDevices(deviceType, devices) {
    
    switch (deviceType) {
    
        case DEVICE_TYPE.VIDEO_DEVICE:
            return {
     type: UPDATE_AVAILABLE_VIDEO_DEVICES, devices }
        case DEVICE_TYPE.AUDIO_DEVICE:
            return {
     type: UPDATE_AVAILABLE_AUDIO_DEVICES, devices }
        default:
            return null
    }
}
export function exchangeMediaDevice(deviceType, deviceInfo) {
    
    switch (deviceType) {
    
        case DEVICE_TYPE.VIDEO_DEVICE:
            return {
     type: EXCHANGE_VIDEO_DEVICE, deviceInfo }
        case DEVICE_TYPE.AUDIO_DEVICE:
            return {
     type: EXCHANGE_AUDIO_DEVICE, deviceInfo }
        default:
            return null
    }
}

Define distributor

stay Store Under the folder , establish reducers.js.

import {
     combineReducers } from '@reduxjs/toolkit';
import {
    
    UPDATE_AVAILABLE_VIDEO_DEVICES,
    UPDATE_AVAILABLE_AUDIO_DEVICES,
    EXCHANGE_AUDIO_DEVICE,
    EXCHANGE_VIDEO_DEVICE,
} from './actions'

function updateAvailableVideoDevices(state = [], action) {
    
    switch (action.type) {
    
        case UPDATE_AVAILABLE_VIDEO_DEVICES:
            action.devices.push()
            return action.devices
        default:
            return state
    }
}

function updateAvailableAudioDevices(state = [], action) {
    
    switch (action.type) {
    
        case UPDATE_AVAILABLE_AUDIO_DEVICES:
            return action.devices
        default:
            return state
    }
}

function exchangeVideoDevice(state = null, action) {
    
    switch (action.type) {
    
        case EXCHANGE_VIDEO_DEVICE:
            localStorage.setItem('usingVideoDevice', action.deviceInfo.key)
            return action.deviceInfo
        default:
            return state
    }
}

function exchangeAudioDevice(state = null, action) {
    
    switch (action.type) {
    
        case EXCHANGE_AUDIO_DEVICE:
            localStorage.setItem('usingAudioDevice', action.deviceInfo.key)
            return action.deviceInfo
        default:
            return state
    }
}

const reducers = combineReducers({
    
    availableVideoDevices: updateAvailableVideoDevices,
    availableAudioDevices: updateAvailableAudioDevices,
    usingVideoDevice: exchangeVideoDevice,
    usingAudioDevice: exchangeAudioDevice
})

export default reducers;

export Redux

stay Store Under the folder , establish store.js.

import {
     configureStore } from '@reduxjs/toolkit';
import reducers from './reducers';

const store = configureStore({
    
    reducer: reducers,
});

export default store;