redux全局笔记

1. 安装npm i redux
2. 建一个专门全局管理的redux文件，里建store.js

//1. 终端安装npm i redux,后引入redux, 
 //2. 通过redux引入createStore( reducer )
 import {createStore} from 'redux'
 //3创建一个reducer函数，他的参数有老的状态和action动作行为，返回老的状态
 const reducer = (prevState={
  //10.给老状态一个初始值
    show:true,
   //  ...
 },action)=>{
  //8.action可以拿的到Detail的dispatch通知内容
    console.log(action)
    //11.创建一个变量把老状态给到他
    let newState = {...prevState}
    //9.通过返回的内容来判断执行哪一个
    switch(action.type){
       case "kerwinhide-tabbar":
         newState.show = false
         //修改老状态再把他返回
         return newState
       case "kerwinshow-tabbar":
         newState.show = true
         return newState
       default:
          return prevState
    }
 }
 //4通过createStore创建一个对象，之后导出去，把3创建的reducer函数放到createStore做参数
 const store = createStore(reducer);

 export default store

3. 在APP.js里

import React, { Component } from 'react'
import MRouter from './router/IndexRouter'
import Tabbar from './components/Tabbar'
import './views/css/App.css'
//6引入store
import store from './redux/store'
export default class App extends Component {
    //12.创建自己的状态
    state = {
        //13.获取store的初始值
        isShow:store.getState()
        //store.getState()是引入store，用subscribe订阅方法，接收通知的信息得来得
    }
    //5在挂载完成的生命周期里做订阅者
    componentDidMount() {
        //6引入store，用subscribe订阅方法，接收通知的信息
        store.subscribe(()=>{
            console.log("app 中订阅",store.getState())
            //store.getState()可以获取最新的状态
            //14接收到就执行这里的内容，把最新的store最新状态里想要的show给到isShow
            this.setState({
                isShow:store.getState().show
            })
        })
    }
    // store.subsribe 订阅
    render() {
        return (
           <div>
                {/* 其他的内容 */}
                <MRouter>
                    {/* 15 判断isShow是否是真来显示或隐藏这个组件 */}
                    {this.state.isShow && <Tabbar></Tabbar>}
                </MRouter>
           </div>
        )
    }
}

4. 在Detail.js组件里

import React,{useEffect} from 'react'
//引进store.dispatch()里的函数的组件
import { show,hide } from '../redux/actionCreator/TabbarActionCreator'
//7引入store
import store from '../redux/store'

export default function Detail(props) {
    console.log(props.match.params.myid,"利用id去后端拿数据。")

    useEffect(() => {
        // console.log("create")
        //进来就执行这里
        //7引入store用dispatch通知方法，一点击进去这个组件就触发通知APP的订阅
        store.dispatch(hide())
        return () => {
            //退出就执行这里
            console.log("destroy")
            //用dispatch通知方法，一点击进去这个组件就触发通知APP的订阅
            //show()和hide()函数内容是在TabbarActionCreator里面
            store.dispatch(show() )
        }
    }, [])

    return (
        <div>
            deteail
        </div>
    )
}

5. show()和hide()函数内容是在TabbarActionCreator里面，路径../redux/actionCreator/TabbarActionCreator'

function hide(){
     return {
        // 必须一个type属性，后面随便写
        type:"kerwinhide-tabbar"
    }
 }

 function show(){
    return {
        type:"kerwinshow-tabbar"
    }
 }

 export {show,hide}