- 为什么需要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 <Context.Provider value={store}>
{children}
</Context.Provider>
}
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
