共享单车—— React后台管理系统开发手记：Redux集成开发

Posted 2021-02-05 ljq66

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

---

一、Redux基础介绍

• 单向数据流：从父组件留向子组件，兄弟组件无法共享数据

• Redux核心概念

1. State：React中的状态，是只读对象，不可直接修改
2. Reducer：基本函数，用于对State的业务处理
3. Action：普通对象，用于描述事件行为，改变State

• Redux工作流

  

• Redux安装

  yarn add redux --save
  
  yarn add react-redux --save
  

• Redux集成

1. 创建Action模块

2. 创建Reducer模块

3. 创建Store模块

4. 通过connect方法将React组件和Redux连接起来

5. 添加<Provider />作为项目的根组件，用于数据的存储

• Redux调试工具安装

1. 在火狐中安装Redux Devtools扩展：【安装地址】

2. 项目中安装redux-devtools-extension调试插件

   yarn add redux-devtools-extension --save
   

• Redux适用场景

1. 项目需求角度考虑：

   • 用户的使用方式复杂
   • 不同身份的用户有不同的使用方式（比如普通用户和管理员）
   • 多个用户之间可以协作
   • 与服务器大量交互，或者使用了WebSocket
   • View要从多个来源获取数据
2. 组件角度考虑：
   • 某个组件的状态，需要共享
   • 某个状态需要在任何地方都可以拿到
   • 一个组件需要改变全局状态
   • 一个组件需要改变另一个组件的状态
3. 不适用的场景：
   • 用户的使用方式非常简单
   • 用户之间没有协作
   • 不需要与服务器大量交互，也没有使用 WebSocket
   • 视图层（View）只从单一来源获取数据

 

二、Redux集成

• src->redux目录下：创建action->index.js操作事件模块

  /**
   * Action 类型：用户事件操作
   */
  
  export const type = {
      SWITCH_MENU : ‘SWITCH_MENU‘
  }
  
  // 菜单点击切换，修改面包屑名称
  export function switchMenu(menuName) {
      return {
          type:type.SWITCH_MENU,
          menuName
      }
  }　　

• src->redux目录下：创建reducer->index.js数据处理模块

  /**
   * Reducer: 数据处理
   */
  import {type} from ‘./../action‘
  
  const initialState = {
      menuName: ‘首页‘
  }
  
  const ebikeData = (state = initialState, action) => {
      switch (action.type) {
          case type.SWITCH_MENU:
              return {
                 ...state, //旧值
                 menuName: action.menuName //新值
              }
              break;
          default:
              return {
                  ...state
              }; 
      } 
  } 
  export default ebikeData;　　

• src->redux目录下：创建store->configureStore.js数据源模块

  /**
   * 引入createStore保存数据源
   */
  
  import {createStore} from ‘redux‘
  import reducer from ‘./../reducer‘
  //调试工具插件方法 -- redux降级到3.7可使用
  // import { composeWithDevTools } from ‘redux-devtools-extension‘  
  
  export default () => createStore(reducer)　　

• src->index.js项目入口文件中：添加<Provider />项目根组件，存储store数据源

  import { Provider } from ‘react-redux‘
  import configureStore from ‘./redux/store/configureStore‘
  
  const store = configureStore();
  ReactDOM.render(
      <Provider store={store}>
          <Router />
      </Provider>, 
      document.getElementById(‘root‘));
  

 

三、面包屑标题切换

          　　

•  pages->components->NevLeft（index.js）中：菜单（Menu）点击切换改变store中的面包屑名称（MenuName）

1. 通过connect方法将react组件与Redux连接

   export default connect()(NavLeft)　　

2. 获取this.props.dispatch方法派发事件：通过action事件自动调用reducer存入到store中

   import {connect} from ‘react-redux‘  //连接器
   import { switchMenu } from ‘./../../redux/action‘ //事件行为
   
   class NavLeft extends React.Component {
       state = {
           currentKey: ‘‘
       }
       handleClick = ({item, key}) => {
           if (key === this.state.currentKey) {
               return false;
           }
           // 事件派发，自动调用reducer，通过reducer保存到store对象中
           const { dispatch } = this.props;
           dispatch(switchMenu(item.props.title)) 
           // console.log(item)
           this.setState({
               currentKey: key
           })
       }
       homeHandleClick = () => {
           const { dispatch } = this.props;
           dispatch(switchMenu(‘首页‘));
           this.setState({
               currentKey: ""
           });
       };
   
       //其它代码
       <Menu 
             onClick={this.handleClick}
             selectedKeys={[this.state.currentKey]}
             theme="dark"
        >
             {this.state.MenuTreeNode}      
       </Menu>
   
   ｝
   

• pages->components->Header（index.js）中：获取并填入store中的面包屑名称（MenuName）

1. 通过connect方法将react组件与Redux连接
2. 利用mapStateToProps函数建立state与store的映射关系：将state.menuName 绑定到 props 的menuName
3. 面包屑标题处：获取this.props.menuName填入

   import {connect} from ‘react-redux‘  //连接器
   ……
   
   //将state.menuName 绑定到 props 的menuName
   const mapStateToProps = state => {
       return {
           menuName: state.menuName
       }
   }
   export default connect(mapStateToProps)(Header)　

关于mapStateToProps mapStateToProps（state, ownProps）为一个函数，它可以传入两个参数，结果一定要返回一个 object； 传入mapStateToProps之后，会订阅store的状态改变，在每次 store 的 state 发生变化的时候，都会被调用； ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用； mapStateToProps可以不传，如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新         ——参考博客

 

---

注：项目来自慕课网