React-Redux(二)：仿照react-redux思路

• 为什么需要react-redux?
  为什么需要react-redux需要从两方面说起，
  1. readux并不是react专有的，其他语言也是有redux，react-redux对redux进行了一层封装
  2. redux在使用的时候，有很多不方便的地方，比如组件必须必须订阅，在订阅中手动更新组件，这导致在使用的时候比较麻烦。react-redux本质就是简化redux的操作
• react-redux程序思想
  在使用redux的时候需要重复的去导入store,react-redux在组件的父组件（祖先组件）导进去，然后通过context让子类消费者消费到，这样就可以简化频繁导入的问题，同时在内部实现订阅和取消订阅的操作
• 具体代码如下
  1. 创建store.js

import {createStore, combineReducers} from "redux";

// 定义修改规则
 const countReducer = (state = 0, action) => {
  switch (action.type) {
    case "ADD":
      return state + 111;
    case "MINUS":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(combineReducers({count: countReducer}));

export default store;

2. 创建provide和Context

//实现react-redux工作方式
import React from 'react';
                    
const Context = React.createContext(); 
const Provide = ({children,store}) =>{
    return <Context.Provider value={store}>
        {children}
    </Context.Provider>
}
export {Provide,Context}

3. 创建useStore

import React,{useContext, useLayoutEffect, useState,useCallback}from 'react';
import {Context} from './reactRedux'
function  useForceUpdate() {
    const[,setState] = useState(0)
    const update = useCallback(() =>{
        setState(pre=>pre+1)
    },[])
    return update
}
export function useStore () {
    const store = useContext(Context) ;//得到store,
    const forceUpdate  = useForceUpdate() //hook 刷新
    useLayoutEffect(()=>{
        const unsubscribe =store.subscribe(() =>{
            forceUpdate() 
        })
        return () =>{
            if (unsubscribe){
                unsubscribe()
            }
        }
    },[store])
    return store
}

4. 创建useSelector.js文件

import {useStore} from './useStore'
let useSelector = (select) =>{
    const store = useStore()
    const {getState} = store
    const selectState = select(getState()) //等于执行getState() ,拿到state,因为select为函数，所以state就就是参数
    return selectState
}
export {useSelector}

5.创建useDispatch.js文件

import {} from './store'
import { useStore } from './useStore'
let useDispatch = () =>{
    const store = useStore()
    return store.dispatch
}
export {useDispatch}

使用就是和正常的react-redux一样

• useStore 中为什么使用 useLayoutEffect 而不适用useEffect，这两者之间有什么区别
  useLayoutEffect 表示无延时 渲染内容更新到DOM ->执行操作
  useEffect：表示有延时 执行操作 -> 渲染内容更新到DOM