redux使用

reacy初体验，总结记录

redux

• 文档 http://cn.redux.js.org/index.html

  安装redux以及调试工具

  yarn add redux redux-react --save
  yarn add redux-devtools-extension --save

  redux基本使用

• 1 创建Action模块
• 2 创建Reducer模块 处理业务数据
• 3 创建Store模块 数据源
• 4 通过Provider作为项目的跟组件，用于数据的存储
• 5 通过connect方法将React组件和Redux连接起来
• 目录结构

  ├── redux
  │   ├── action
  │   │   ├── index.js
  │   ├── reducer
  │   │   ├── index.js
  │   ├── store
  │   │   ├── index.js
  ├── index 根组件

  1 创建Action模块

• action/index.js

  export const type = {
      SWITCH_MENU:'SWITCH_MENU'
  }
  
  export function switchMenu(menuName){
      return{
          type: type.SWITCH_MENU,
          menuName
      }
  }

  2 创建Reducer模块 处理业务数据

  /*
      第二部 Reducer 数据处理
  */
  import {type} from '../action/index'
  const ininialState = {
      menuName:'首页'
  }
  export default (state = ininialState,action)=>{
      //判断action提交的是什么方法类型action.type
      switch (action.type) {
          case type.SWITCH_MENU:
          return {
              //把原有状态结构出来 否则新状态就相当于清空以前的状态
              ...state,//保存原有的数据不变然后再后续添加或者修改状态
              menuName: action.menuName //返回新的值 但是不能把以前的值清空掉
          }
          default:
              return state;
      }
  }

  3 创建Store模块 数据源

  /*
   引入createStore 是用来创建一个数据源对象保存我们的数据的
  */
  //相当于创建工厂
  import { createStore } from 'redux';
  //引用数据源  store是引用的reducer，action会触发reducer，三者关系很密切
  import reducer from './../reducer'
  
  //数据处理后会返回给数据源 才能取到最新的数据  在根组件index里获取
  export default ()=>createStore(reducer)

  4 通过Provider作为项目的根组件index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import Router from './router'
  //获取store的数据源对象 提供数据源
  import { Provider } from 'react-redux';
  //引入数据源
  import configStore from './redux/store'
  
  const store = configStore()
  window._store = store; //_store.getState()
  
  ReactDOM.render(
      //Provider提供数据源  这样所有的组件都可以拿到数据源了
      <Provider store={store}>
                  <Router />//路由
      </Provider>, document.getElementById('root'));

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

  import React, { Component } from 'react'
  import { Row, Col, Button } from "antd"
  import { withRouter } from 'react-router-dom';
  //通过connect（redux连接器）使react关联redux 点击的时候需要触发action 引入action
  import { connect } from 'react-redux'
  class Header extends Component {
    render() {
      return (
         <div className='header'></div>
     )
  }
  const mapStateToProps = state =>{
          console.log('redux获取state数据', state)
          return {
              menuName: state.menuName
          }
  }
  //withRouter是路由跳转
  export default withRouter(connect(mapStateToProps)(Header))

赏

谢谢你请我吃糖果

支付宝

微信