react-redux使用

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux';
import {mainMenuClickCreator} from "@/redux/main-menu";
//最上引入mainMenuClickCreator.js
//调用： <a onClick={() => props.onMenuClick("my")} href="">我的</a>

const mapStateToProps = (state) => {
    return {
        currentRoute: state.Router.currentRoute.path,
        selectedKey: getSelectedKey(state.Router.currentRoute.path || '/')
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onMenuClick: bindActionCreators(mainMenuClickCreator, dispatch),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(DesktopNavbar);

mainMenuClickCreator.js

/* 定义action creator */
export const mainMenuClickCreator = (currentMenu) => {
  return {type: 'MENU_CLICK', payload: currentMenu};
};

/* 定义初始状态, 每个组件只需要关心自己的状态 */
const initState = {
  currentMenu: "home",
};

/* 定义reducer, 每个组件只有一个reducer */
const reducer = (state = initState, action = {}) => {
  switch (action.type) {
    case 'MENU_CLICK':
      return {...state, currentMenu: action.payload};
    default: // 注意必须要有default语句
      return state;
  }
};

/* 导出的字段名称固定, 方便后续的store去处理 */
export default {initState, reducer};

import {createStore, combineReducers} from 'redux';
import Sidebar from "./sidebar";
import Router from "./router";
import MainMenu from "./main-menu";

/* 这个文件用于生成store   name:store.js*/
// 整体的初始状态
// 就是把每个组件自己的初始状态组合起来, 注意key的名字和组件名一致
const initState = {
    Sidebar: Sidebar.initState,
    Router:Router.initState,
    MainMenu:MainMenu.initState,
};

// 定义reducer
// 每个组件自己的reducer负责维护自己的状态, 注意key的名字和组件名一致
const reducers = {
    Sidebar: Sidebar.reducer,
    Router:Router.reducer,
    MainMenu:MainMenu.reducer,
};


// 组合最终的store
const store = createStore(combineReducers(reducers), initState);

export default store;