react redux 简化_React-Redux(二)：仿照react-redux思路

为什么需要react-redux?

为什么需要react-redux需要从两方面说起，

readux并不是react专有的，其他语言也是有redux，react-redux对redux进行了一层封装

redux在使用的时候，有很多不方便的地方，比如组件必须必须订阅，在订阅中手动更新组件，这导致在使用的时候比较麻烦。react-redux本质就是简化redux的操作

react-redux程序思想

在使用redux的时候需要重复的去导入store,react-redux在组件的父组件(祖先组件)导进去，然后通过context让子类消费者消费到，这样就可以简化频繁导入的问题，同时在内部实现订阅和取消订阅的操作

具体代码如下

创建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;

创建provide和Context

//实现react-redux工作方式

import React from 'react';

const Context = React.createContext();

const Provide = ({children,store}) =>{

return

{children}

}

export {Provide,Context}

创建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

}

创建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