react状态管理

状态管理

安装模块 yarn add redux react-redux redux-thunk -S

在src 目录下建立 store/index.js文件

// 导入模块
import thunk from 'redux-thunk'		               
import {createStore, applyMiddleware} from 'redux' 
import {composeWithDevTools} from "redux-devtools-extension"

// 合并reducer
const reducers = combineReducers({
    // 分模块 写 状态
})

// 创建仓库
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))

// 导出仓库
export default store

在入口文件激活仓库 src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/layouts/App.jsx';
import { Provider} from 'react-redux';
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import * as serviceWorker from './serviceWorker';

import store from '@/store/index.js'
// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(
  <Provider store={ store }>
    <Router>
      <Switch> 
        <Route path="/" component={ App }></Route>
      </Switch>
    </Router>
  </Provider>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// 项目上线要把 unregister 改为 register 优化项目
serviceWorker.unregister();

UI 抽离

将原来的写HTML的组件更名为 UI
添加index.jsx 组件，

import { connect } from 'react-redux'

import UI from './UI.jsx'

// 获取仓库数据
const mapStateToProps = state => { // state就是仓库store数据
  return { // 组件中通过 this.props.键 来获取数据
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}
 // 调用发送异步请求方法
const mapDispatchToProps= dispatch => {
  return { // 组件中通过this.props.键()
    // 键: index => dispatch(incrment(index))   // 注：dispatch中传递的是action
  }
}

const Com = connect(mapStateToProps, mapDispatchToProps)(UI)

export default Com

建立store.js文件 放数据

export default (state = {
   bannerList: [],
   proList: []
}, action) =>{
  const { type, data } = action
  switch (type) {
    case "HOME_BANNER_LIST":
      return { ...state, ...{bannerList: data}}
    case "HOME_PRO_LIST":
      return Object.assign({}, state, {proList: data})
  
    default:
      break;
  }
  return state
}

在store/index.js文件中激活模块（小仓库

// 导入模块
import thunk from 'redux-thunk'		               
import {createStore, applyMiddleware, combineReducers} from 'redux' 
import home from '@/views/home/store' //导入小的仓库模块
// 导入reducer
const reducers = combineReducers({
  // // 分模块 写 状态
  home    // 激活
})

// 创建仓库
const store = createStore(reducers,applyMiddleware(thunk))

// 导出仓库
export default store

去仓库中的数据

// 获取仓库数据
const mapStateToProps = state => { // state就是仓库store数据
  return { // 组件中通过 this.props.键 来获取数据
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}

提供页面请求的函数

const mapDispatchToProps= dispatch => {
  return { // 组件中通过this.props.键()
    // 键: index => dispatch(incrment(index))   // 注：dispatch中传递的是action
    getBannerList () {
      console.log('获取奔波数据')
    } 
  }
}
// 页面组件可以通过this.props来获取 getBannerList() 方法

异步请求获取数据

将逻辑代码抽离出来
import { getBannerList } from '@/api/home'

export function getBannerListdata () {
  console.log("getBannerListdata")
  return (dispatch) => {
    getBannerList().then(res => {
      dispatch({
        type: "HOME_BANNER_LIST",
        data: res.data
      })
    })
  }
}

在同文件目录下的index文件中通过中间件 dispatch 调用

import { getBannerListdata } from './action'

const mapDispatchToProps= dispatch => {
  return { // 组件中通过this.props.键()
    // 键: index => dispatch(incrment(index))   // 注：dispatch中传递的是action
    getBannerList () {
      dispatch(getBannerListdata())
    } 
  }
}

UI 页面中通过 this.props调用 getBannerList()方法

目录结构

另一种写法 （下集预告）