redux的用法

• 新建action--index.js

// 
import {
    createStore
} from 'redux'
import reducer from './../reducer/index'
const store = (PreState) => createStore(reducer, PreState)
export default store;

• 新建 reducer--index.js

/**
 * reducer
 */

import {
    combineReducers
} from 'redux'
import {
    type
} from '../action';
const initialState = {
    menuName: " 首页"
}

const init = {
    menuName: " 首页"
}

const ebik = (state,action )=> {
    switch (action.type) {
        case type.menuName:
        return {
            ...state,
            menuName: action.menuName
        }
            
            break;
    
        default:
        return {
            ...state
        }
            break;
    }
}

const ebikeData = (state = initialState, action) => {
    console.log(action);
    switch (action.type) {
        case type.SWITCH_MENU:
            return {
                ...state,
                menuName: action.value.name
            };
        default:
        // 千万注意 
            return {
                ...state
            };
    }
};

export default ebikeData;

• 新建store--index.js

// 
import {
    createStore
} from 'redux'
import reducer from './../reducer/index'
const store = (PreState) => createStore(reducer, PreState)
export default store;

• 在根组件中包裹

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import Ad from "./router/index";
import Ad3 from "./router/index3";
//
import { Provider } from "react-redux";
import configStore from "./redux/store/index";

// import Mains from "./router/indexMain";

import * as serviceWorker from "./serviceWorker";
const store = configStore();
// import store from "./redux1/store.js";

ReactDOM.render(
  <Provider store={store}>
    <Ad />
  </Provider>,
  // <React.StrictMode>

  // </React.StrictMode>
  document.getElementById("root")
);



serviceWorker.unregister();

• 在组件中使用

import React, { Component } from "react";

import { HashRouter, Router, Link } from "react-router-dom";
// 连接器
import { connect } from "react-redux";


// 触发事件行为

const mapStateToProps = state => ({ num: state });
const mapDispatchToProps = {
  add: () => ({
    type: "add",
    value: 30
  }),
  minus: () => ({
    type: "minus",
    value: "787878"
  }),
  hn: () => ({
    type: "SWITCH_MENU",
    value: { age: 28,name: "你随便怎样"}
  })
};
// 函数式
// function Admin({ num, add, minus }) {
//   return (
//     <div>
//       <p>{num.name}</p>
//       <p>{num.age}</p>
//       <div>
//         <button onClick={add}>增加 </button>
//         <button onClick={minus}>减少 </button>
//       </div>
//     </div>
//   );
// }

// 装饰器语法
// 当然也可以强化
// @connect(mapStateToProps,mapDispatchToProps)  运用装饰器需要装插件的 或者改配置
class Admin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 10,
      showModal2: false
    };
  }

  render() {
    const { num, minus, add, hn } = this.props;
    return (
      <div>
        这是home组件
        {/* <button onClick={add}> 点击按钮 </button>
        <button onClick={minus}> 点击按钮 </button>

        <h3> {num.age} </h3>
        <h3> {num.name} </h3> */}
        <p> {num.menuName}</p>
        <button onClick={hn}> 改变 </button>
        <br />
        <Link to="/yu/yuyu">abc</Link>
        <div>
          动态路由传值: <br />
          成功学会动态路由的传值：
          {this.props.match.params.id}
        </div>
        {this.props.children}
      </div>
    );
  }
}

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