1.store.js

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer)

export default store

2. reducer.js

import { 
  SAVE_RESOURCE,
  SET_CURRENT_TIME,
  SET_DATA_LIST,
  SET_HAS_AUTHORITY,
  SET_TREE_DATA,
  SET_SEARCH_VALUE,
  SET_FIRST_SELECT,
  SET_FIRST_NAME,
} from './actionTypes'

const defaultState = {
  dataSourceId: "",
  fistValue: "",
  fistName: '',
  id: "",
  name: "",
  type: "",
  time: '',  // currentTime
  treeHeight: 0,
  expandedKeys: '',
  list: [],
  treeData: [],
  list1: [],
  secondName: '',
  dataList: [],
  hasAuthority: true,
  searchValue: '',
  configurePermissions: true,

}
export default (state = defaultState,action)=>{
  // console.log(state, action)
  switch(action.type){
    case SAVE_RESOURCE:
      return {...state, ...action.value };
    case SET_CURRENT_TIME:
      return { ...state, name: action.value }; 
    case SET_DATA_LIST:
      return { ...state, dataList: action.value }; 
    case SET_HAS_AUTHORITY:
      return { ...state, hasAuthority: action.value }; 
    case SET_TREE_DATA:
      return { ...state, treeData: action.value }; 
    case SET_SEARCH_VALUE:
      return { ...state, searchValue: action.value }; 
    case SET_FIRST_SELECT:
      return { ...state, list: action.value }; 
    case SET_FIRST_NAME:
      return { ...state, fistName: action.value }; 
    default:
      break
  }
  return state
}

3.actionTypes.js

export const SAVE_RESOURCE = 'saveResource'
export const SET_CURRENT_TIME = 'setCurrentTime'
export const SET_DATA_LIST = 'setDataList'
export const SET_HAS_AUTHORITY = 'setHasAuthority'
export const SET_TREE_DATA = 'setTreeData'
export const SET_SEARCH_VALUE = 'setSearchValue'
export const SET_FIRST_SELECT = 'setSearchValue'
export const SET_FIRST_NAME = 'setSearchValue'
// export const GET_CURRENT_TIME = 'getCurrentTime'

4. actionCreaters.js

import { 
  SAVE_RESOURCE,
  SET_CURRENT_TIME,
  SET_DATA_LIST,
  SET_HAS_AUTHORITY,
  SET_TREE_DATA,
  SET_SEARCH_VALUE,
  SET_FIRST_SELECT,
  SET_FIRST_NAME,
} from './actionTypes'

// 當(dāng)前曲線的當(dāng)前時(shí)間
export const setCurrentTime = (val)=>({
  type: SET_CURRENT_TIME,
  value: val
})
// 監(jiān)控對(duì)象信息
export const saveResource = (val)=>({
  type: SAVE_RESOURCE,
  value: val
})
export const setDataList = (val)=>({
  type: SET_DATA_LIST,
  value: val
})
export const setHasAuthority = (val)=>({
  type: SET_HAS_AUTHORITY,
  value: val
})
export const setTreeData = (val)=>({
  type: SET_TREE_DATA,
  value: val
})
export const setSearchValue = (val)=>({
  type: SET_SEARCH_VALUE,
  value: val
})
export const setFirstSelect = (val)=>({
  type: SET_FIRST_SELECT,
  value: val
})
export const setFirstName = (val)=>({
  type: SET_FIRST_NAME,
  value: val
})

6. 用到redux的組件
   index.js

import { connect } from 'react-redux';
import {
    setDataList,
    setHasAuthority,
    setTreeData,
    setSearchValue,
    setFirstName,
    setFirstSelect,
} from '../../store/actionCreaters'
import { jurisdiction, findDataSourceForKey,findDataSourceForValue, initTreeOne,initTreeSearch } from '../../api/indexAervice'

class Description extends Component {
  constructor(props){
        super(props)
        this.state={
            isShow: false, 
        }
componentDidMount(){
        const { dataSourceId } = this.props.state // store文件中的state
        console.log('Description',dataSourceId, this.props.state)
// store里面的方法（通過dispatchToProps里面調(diào)用）
       this.props.setDataList(keyObj.dataObj)
      this.props.setHasAuthority(true)
      this.props.setTreeData(res.data)
      this.props.setSearchValue('')
    }
render() {
        return (
            <div className="list">
                <div className="text">
                    <Header
                        title='機(jī)構(gòu)列表查詢'
                        isShow={this.state.isShow}
                        exchange = {()=>{
                            this.setState({isShow:!this.state.isShow})
                        }}
                        isActive = 'index'
                    ></Header>
                    {!this.state.hasAuthority&&<div className='menuList'>
                        <Menu className="menu1"
                        fistName={this.state.fistName}
                        list={this.state.list}
                        change={val=>this.change(val)}
                        ></Menu>
                        <Menu2 className="menu1"
                        secondName={this.state.secondName}
                        list1={this.state.list1}
                        handle={val=>this.handle(val)}></Menu2>
                    </div>}
                </div>
                <div className={`${this.state.hasAuthority?'hasAuthority':null} tree`} id="tree">
                    <Default 
                        loading={this.state.loading}
                        expandedKeys={this.state.expandedKeys}
                        treeData={this.state.treeData}
                        dataList={this.state.dataList}
                        dataSourceId={this.state.dataSourceId}
                        fistValue={this.state.fistValue}
                        searchTree={this.searchTree}
                        searchValue={this.state.searchValue}
                        defaultFn={this.defaultFn}>
                    </Default>
                </div>
                {this.state.configurePermissions&&<Footer></Footer>}
            </div>
        )
    }
  }
const stateToProps = (state)=>{
    return {
        state: state
    }
}
const dispatchToProps = (dispatch)=>{
    return {
        setDataList(data) {
            dispatch(setDataList(data))
        },
        setHasAuthority(flag) {
            dispatch(setHasAuthority(flag))
        },
        setTreeData(data) {
            dispatch(setTreeData(data))
        },
        setSearchValue(data) {
            dispatch(setSearchValue(data))
        },
        setFirstSelect(data) {
            dispatch(setFirstSelect(data))
        },
        setFirstName(data) {
            dispatch(setFirstName(data))
        },
    }
}
export default connect(stateToProps,dispatchToProps)(Description)

routes.js

import React, { Component } from 'react'
// import { BrowserRouter as Routers,  Route, Switch} from 'react-router-dom'
import { HashRouter as Router, Route, Switch} from "react-router-dom";
import { Provider } from 'react-redux';

import routes from './route'
import store from '../store'
class Routers extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Switch >
            {
              routes.map(({ name, path, exact = true, component }) => (
                <Route path = {path} exact={exact} component={component} key={name} />
              ))
            }
          </Switch> 
        </Router>
      </Provider>
    );
  }
}

export default Routers;