跨组件通信

vue : state mutation action module
redux: state reducer action conbine合并reducer

第一步：我们在login组件中创建一个redux.js

const initState ={
    isLogin:false,
    usename:"李白"
}
export const updateLogin=(payload)=>{
    return {
        type:"LOGIN_UPDATE_LOGIN",
        payload
    }
}
export const updateUsename=(payload)=>{
    return {
        type:"LOGIN_UPDATE_USENAME",
        payload
    }
}
export default (state=initState,action)=>{
    let {type}=action
    switch(type){
        case 'LOGIN_UPDATE_LOGIN':
            return{
                ...state,
                isLogin:action.payload
        }
        case 'LOGIN_UPDATE_USENAME':
            return{
                ...state,
                usename:action.payload
            }
        default : 
        return state
    }
   
}

第二步：在cart组件中创建redux.js

const initState ={
    cartNum:0
}
export const updateCartNum=(paylog)=>{
    return {
        type:"CART_UPDATE_CARTNUM",
        paylog
    }
}
export default (state=initState,action)=>{
    let {type}=action
    switch(type){
        case 'CART_UPDATE_CARTNUM':
            return{
                ...state,
                cartNum:action.paylog

            }
            default :
                return state
    }
}

第三步：在src的目录下创建一个redux的文件
这个用于对各个组件中的redux的模块进行集中管理

import { combineReducers,createStore } from "redux";
//导入模块
import cartReducer from '../pages/cart/redux'
import loginReducer from '../pages/login/redux'
//把模块都存放到reduces
const reduces =combineReducers({
    login:loginReducer,
    cart:cartReducer
})
const store =createStore(reduces)
export default store;

第四步：在全局的index.js中进行挂载

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//1.导入react-redux
import { Provider } from "react-redux";
//2.导入redux的模块
import store from '../src/redux/redux'

ReactDOM.render(
//3.然后用Provider包住 <App />，Provider里面是我们的redux的模块
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

第五步：在我们需要的模块中去使用，例如cart模块

import React from 'react';
//1.导入react-redux
import { connect } from "react-redux";
//2.导入redux
import { bindActionCreators } from "redux";
//3.导入updateLogin，这个是我们模块中定义的方法
import {updateLogin} from '../login/redux';

class My extends React.Component{
    constructor(props) {
        super(props);
        this.login=this.login.bind(this)
    }

    render() {
        let {isLogin}=this.props
        console.log("isLogin",isLogin)
        return (
        <div>
          {isLogin?<p>李白</p>:<button onClick={this.login}>立即登录</button>}</div>
        )
    }

    ////////////////////修改username
login(){
     setTimeout(() => {
         this.props.updateLogin(true);
     }, 2000);   
}
}
// export default My;

// 4.把state的值放入props
function mapStateToProps(state) {
    return {
        isLogin: state.login.isLogin
    };
  }
  
  // 5.把action放入props，注意：这里的updateLogin要与我们上面导入的updateLogin一致
  function mapDisapatchToProps(dispatch) {
    return {
    updateLogin: bindActionCreators(updateLogin, dispatch)
    };
  }  
  // 6.把Center组件变成高阶组件(放入一个组件,得到一个新组件)
  export default connect(mapStateToProps, mapDisapatchToProps)(My);