react

react如何使用@符号

// 1.暴露webpack配置
npm run eject
// 2.修改config目录下的webpack.config.js 搜索alias 在下面加入如下代码
 '@': path.resolve('src'),
//最终如下
 ...(modules.webpackAliases || {}),
 '@': path.resolve('src'),

react 如何共享redux

项目目录

store   //redux目录
    - user //用户版块
        - action    // redux执行方法
        - actionType    //redux执行的方法名
        - reducer   //修改数据 最终执行
    - other //其他版块
        - action    // redux执行方法
        - actionType// redux执行的方法名
        - reducer // 修改数据 最终执行
    - index.js //暴露版块

store/index.js

// 引入redux
import { createStore, combineReducers, applyMiddleware } from "redux"
// 引入版块下面的reducer
import * as home from "./other/reducer"
// redux中间件
import thunk from "redux-thunk"
// 创建store createStore(combineReducers({...版块,...版块}),applyMiddleware(thunk))
let store = createStore(combineReducers({ ...home }), applyMiddleware(thunk))
//暴露出去
export default store

store/版块/action

//引入actionType
import * as home from "./actionType"
//暴露执行方法
//执行方法的时候先执行这个方法 => 调用reducer文件内的修改方法 => reducer方法获取参数=>修改数据
export const saveUserInfo = (value, datatype) => {
    //value dataType 执行方法时传递的参数
    return {
        type: home.SAVEUSER,//引用actionType
        value,//传递的参数
        datatype,//传递的参数
    }
}

store/版块/actionType

//普通的暴露接口名称
export const SAVEUSER = "SAVEUSER"

store/版块/reducer

//引用actionType
import * as home from "./actionType"
//默认数据
let defaultState = {
    name: "",
    age: "",
    isLogin: "",
    height: "",
    token: "",
}
//暴露数据方法  state:'默认数据' action:'调用action时里面的参数return为json，接收也为json'
//formData为在state中的key 不能重复！会顶替重名的数据
export const formData = (state = defaultState, action = {}) => {
    //switch 判断action.type 判断他要修改什么数据
    switch (action.type) {
        //如果他是home.SAVEUSER 则执行如下方法
        case home.SAVEUSER:
                // 返回一个新的数据 也就是更新数据状态 最终把state，和传过来的参数合成一个新的数据，返回并且更新数据
            return { ...state, ...{ [action.datatype]: action.value } }
        //如果都不是 默认返回state  
        default:
                //返回state
            return state
    }
}

src/index.js

//react
import React from "react"
import ReactDOM from "react-dom"
//路由
import Router from "./router/index"
//全局antd css
import "antd/dist/antd.css"
//全局css 用来覆盖antd css 或者全局样式
import "@/assets/css/base.css"
//引入redux
import { Provider } from "react-redux"
//引入store/index.js 里面暴露了全部的redux
import store from "./store/index"
//执行方法
ReactDOM.render(
   //把store里面的数据绑定到页面最上面,全局数据
    <Provider store={store}>
            //路由文件
        <Router></Router>
    </Provider>,
    document.getElementById("root")
)

使用

//引入redux
import { connect } from "react-redux"
//引入你要执行的action
import { saveUserInfo } from "@/store/other/action"
//组件
class About extends Component {
    //构造函数
    constructor(props) {
            //完成以下步骤  props里面就会有data数据 data里面就是state里面的数据
        super(props)
    }
    render() {
        return ()
    }
}
//组件暴露出去 这个方法允许我们将store中的数据作为props绑定到组件中
export default connect(
    //state=>({key:value})  state:redux中的数据  key:传入props中的key  value:传入props中的数据
    //如果直接返回 会把state解构 放在props里面
    state => ({
        data: state,
    }),
    //需要执行的修改数据方法
    {
        saveUserInfo,
    }
)(About) // About 组件

React-Router

用法

//react
import React, { Component } from "react"
//引入router HashRouter:路由     Route ：子路由   Switch：只能选一个展示
import { HashRouter as Router, Route, Switch } from "react-router-dom"
//引入异步引用
import asyncComponent from "@/utils/asyncComponents"
//获取组件信息
const Mine = asyncComponent(() => import("@/views/mine/Mine"))
const Index = asyncComponent(() => import("@/views/index/Index"))
// App主界面
class App extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            //路由
            <Router>
                    //只能展示一个路由
                <Switch>
                            //path：路径名称   componet：组件信息
                    <Route path="/mine" component={Mine}></Route>
                    <Route path="/" component={Index}></Route>
                                        //如果匹配不到 就进入到哪里哪里
                                        <Redirect from="/mine" to="/mine/news" />
                </Switch>
            </Router>
        )
    }
}

export default App

获取当前路由

//引入withRouter
import { withRouter } from "react-router"
//暴露出去  在props里面就能拿到路由
export default withRouter(MineSider)