react项目使用redux入门-1

场景：切换语言

1. 安装redux依赖包

   npm i redux --save
   

2. 在根目录(src)下新建目录redux及文件

   mkdir src/redux
   touch src/redux/store.ts
   touch src/redux/languageReducer.ts
   

   • store.ts

   import { createStore } from 'redux'
   import languageReducer form './languageReducer.ts'
   
   const store = createStore(languageReducer)
   
   export default store
   

   • languageReducer.ts

   interface LanguageState {
     lng: 'zh' | 'en',
     languageList: {code: string, language: string}[]
   }
   
   export interface LanguageAction {
     type: 'language/change' | 'language/add',
     payload: any
   }
   
   const defaultStoreState: LanguageState = {
     lng: 'zh',
     languageList: [{ code: 'zh', language: '中文'}， { code: 'en', language: 'English'}]
   }
   
   export default (state = defaultStoreState, action: LanguageAction) => {
     switch(action.type){
         case: 'language/change':
         	return {...state, lng: action.payload}
         case: 'language/add':
         	return { ...state, languageList: [state.languageList, payload]}
       default:
         return state
     }
   }
   

3. Header组件中使用store

   import { Component } from 'react'
   import { withRouter, RouteComponentProps } from 'react-router-dom'
   import { MenuInfo } from 'rc-menu/lib/interface'
   import { nanoid } from 'nanoid'
   import store from 'redux/store'
   import { LanguageState, LanguageAction } from 'redux/languageAction'
   
   const interface StateProps extends LangageState {}
   
   class HeaderComponent extends Component{
     constructor(props:RouteComponentProps){
       super(props)
    		/* state初始化获取 store中的数据 */   
       const storeState = store.getState()
       this.state = {
         lng: storeState.lng,
         languageList: storeState.languageList
       }
     }
     
     componentDidMount(){
       /* subscribe */
       store.subscribe(() => {
         const storeState = store.getState()
         this.setState({
           lng: storeState.lng,
           languageList: storeState.languageList
         })
       })
     }
     
     render(){
       /* meun 的点击事件 */
       const oprateLanguage = ( e: MenuInfo ) => {
         let action
         if(e.key !== 'new'){
           action = {
             type: 'language/change',
             payload: e.key
           }
         }else{
           action = {
             type: 'language/add',
             payload: { code: `lng${nanoid()}`, language: '新语种'}
           }
         }
         /* dispatch */
         store.dispatch(action)
       }
       
       
       const menu = (
         
           
             添加新语言
           
           {languageList.map(language => (
             
               {language.language}
             
           ))}
         
       )
       
       return (
         
   
           让旅游更幸福
           
           	
           		{languageList.find(language => language.code === lng)?.language}
             	
             
    				
           
                          history.push('/signIn')}>登录
            history.push('/register')}>注册
           
   		
       )
     }
   }
   
   export const Header = withRouter(HeaderComponent)