React redux的使用整理

store文件下分modules和index.ts两个文件
modules中存放单独的模块文件夹，每个中存放actions.ts 和 index.ts
1.actions.ts：

export enum actionType {
    FUNCTIONS = 'FUNCTIONS',
}
export const updateFunctions = (value:any) => ({
    type: actionType.FUNCTIONS,
    value,
})

export default {
    updateFunctions
}

2.index.ts中

import {actionType} from './actions'
import {IAction} from 'src/types'
在index中定义了State和操作方法
const welcomeState = {
    functions: [],
    还有其他的，去掉了
}
/**
 * 更新机器人id和是否有机器人权限
 * @param newState 
 * @param action 
 */
const updateRobotId = (newState:any,action:IAction)=>{
    if(action.value.insideBotId === 0){
        newState.isFirst = false
    }
    newState.robotId = action.value.insideBotId
    if(action.value.botName!==undefined){
        newState.robotName = action.value.botName
        newState.ordererShopCode = action.value.ordererShopCode
    }
    if(action.value.noRobot!==undefined){
        newState.noRobot = action.value.noRobot
    }
    if(action.value.primaryFlag!==undefined){
        newState.primaryFlag = action.value.primaryFlag
    }
    return newState
}

/**
 * 更新当前账户所拥有的机器人列表信息
 * @param newState 
 * @param action 
 */
const updateRobotList = (newState:any,action:IAction)=>{
    newState.robotList = [].concat(action.value.robotList||[])
    newState.robotListLength = [].concat(action.value.robotListLength||0)
    return newState
}

/**
 * 更新有权限的菜单列表
 * @param newState 
 * @param action 
 */
const updateMenu = (newState:any,action:IAction)=>{
    newState.menuList = [].concat(action.value||[])
    newState.authUrls = updateOther(newState.menuList).authUrls
    newState.functions = updateOther(newState.menuList).functions
    return newState
}

const updateOther = (menuList:any[])=>{
    const authUrls:string[] = []
    const functions:string[] = []
    menuList.map((vo:any)=>{
        authUrls.push(vo.menuUrl)
        if(vo.menuVoList && vo.menuVoList.length> 0){
            vo.menuVoList.map((vo2:any)=>{
                authUrls.push(vo2.menuUrl)
                if(vo2.functionDtoList && vo2.functionDtoList.length){
                    vo2.functionDtoList.map((fitem:any)=>{
                        functions.push(fitem.functionCode)
                    })
                }
            })
        }
        if(vo.functionDtoList && vo.functionDtoList.length){
            vo.functionDtoList.map((fitem:any)=>{
                functions.push(fitem.functionCode)
            })
        }
    })
    return {authUrls, functions}
}

const updateAuthUrls = (newState:any,action:IAction)=>{
    newState.authUrls = [].concat(action.value||[])
    return newState
}

const updateFunctions = (newState:any,action:IAction)=>{
    newState.functions = [].concat(action.value||[])
    return newState
}

/**
 * action对应处理函数映射
 */
const ActionMap = {
    [actionType.ROBOT_ID]:updateRobotId,
    [actionType.ROBOT_LIST]:updateRobotList,
    [actionType.MEUN_LIST]:updateMenu,
    [actionType.AUTH_URLS]:updateAuthUrls,
    [actionType.FUNCTIONS]:updateFunctions,
}
通过映射根据actionType找到响应的方法执行，更新Store的state中的值
export default (state = welcomeState,action:IAction)=>{
    const newState = JSON.parse(JSON.stringify(state))
    const handleFunc = ActionMap[action.type]
    if(typeof handleFunc === 'function'){
        return handleFunc(newState,action)
    }
    return state
}
IAction的类型是export interface IAction {
    type: string
    value: any
}

3.store中index.ts

创建store
import { createStore, combineReducers } from 'redux'
import commonReducer from './modules/common/reducer'
import welcomeReducer from './modules/welcome'
import login from './modules/login'
import knowledgeReducer from './modules/knowledgeSolution/reducer'
import messageReducer from './modules/message'

const reducer = combineReducers<any>({
    commonReducer,
    welcomeReducer,
    knowledgeReducer,
    login,
    messageReducer
})

const store = createStore(reducer)

export default store

4.在根目录App中引入store

import React from 'react'
import './App.css'
import 'src/assets/style/index.less'
// import Layout from './components/views/Layout/Layout'
import AuthCheck from 'src/components/views/AuthCheck'
import { Provider } from 'react-redux'
import store from './store'

function App() {
    return (
        <Provider store={store}>
            <div className="App">
                <AuthCheck />
            </div>
        </Provider>
    )
}

export default App

5.取值的时候通过高阶组件connect包裹

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
export default connect(
    (state:any)=>{
        return{
            robotId:state.login.robotId,
            noRobot:state.login.noRobot,
            isFirst:state.login.isFirst,
        }
    },
    dispatch=>{
        return{
            actions:bindActionCreators(actions,dispatch),
        }
    }
)(AuthCheck)

6.设置值的时候

    getMenuList = async (info:any)=>{
        return new Promise(async (resolve,reject)=>{
            try {
                const res = await queryMenu(info.insideBotId)
                info.primaryFlag = res.primaryFlag
                this.props.actions.updateRobotId(info)   当前组件使用connet包裹
                this.props.actions.updateMenuList(res.menuVoList)
                resolve()
            } catch (error) {
                reject()
            }
        })
    }