redux的用法---用户4344670

新建 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); ---来自腾讯云社区的---用户4344670