redux

最近在学 react-redux 思路有点混乱，在这梳理下。TS 部分略过，还没学完。

需求：实现切换语言功能

实现思路：将语言和语言列表储存在 redux 中，在 header 组建内部进行 dispatch

store.ts

import languageReducer  from './language/languageReducer'

//定义仓库，创建  reducer
const store=createStore(languageReducer)
export type RootState =ReturnType< typeof store.getState>

export default store

reducer.js

import {CHANGE_LANGUAGE,ADD_LANGUAGE,languageActionTypes} from './languageActions'
// 定义语言接口类型
interface languageState{
    language:'zh' | 'en',
    languageList:{name:string, code : string}[]
}
// 定义数据
const defaultState:languageState={
    language:'zh',
    languageList:[
        {name:'中文', code : 'zh'},
        {name:'English', code : 'en'}
    ]
}
// 处理语言配置信息，经过action处理输出新数据
export default (state=defaultState, action:languageActionTypes)=>{
    switch(action.type){
        case CHANGE_LANGUAGE:
            i18n.changeLanguage(action.payload);
            return {...state,language:action.payload};
        case ADD_LANGUAGE:
            return {...state,languageList:[...state.languageList,action.payload]}
        default:
            return state
    }
}

为了防止书写错误，尽量将 action 抽离出来

action.ts

export const  CHANGE_LANGUAGE='change_language'
export const  ADD_LANGUAGE='add_language'

interface ChangeLanguageAction {
    type:typeof CHANGE_LANGUAGE,
    payload:'zh'|'en'
}
interface AddLanguageAction {
    type:typeof ADD_LANGUAGE,
    payload:{name:string,code:string}
}
//导出类型
export type languageActionTypes=ChangeLanguageAction|AddLanguageAction

export const changeLanguageActionCreator=(code:'zh'|'en') :ChangeLanguageAction=>{
    return {
        type:CHANGE_LANGUAGE,
        payload:code
    }
}

export const addLanguageActionCreator=(name:string,code:string):AddLanguageAction=>{
    return {
        type:ADD_LANGUAGE,
        payload:{name,code}
    }
}

heaer.ts

import {changeLanguageActionCreator,addLanguageActionCreator} from '../../redux/language/languageActions'
import { useDispatch } from 'react-redux'
//取出数据
const language=useSelector((state)=>state.language)
const languageList=useSelector((state)=>state.languageList)
const dispatch=useDispatch()
    //引入store中数据
    const handleChangeLanguage=(e)=>{
        if(e.key=='new'){
            const action=addLanguageActionCreator('新语言','new_lang')
            dispatch(action)
        }else{
            const action=changeLanguageActionCreator(e.key)
            dispatch(action)
        }
        
    }