简单了解 React-redux 并实现简单版本
React-Redux将所有组将分为两大类： UI组件和容器组件
一、UI组件满足以下特征：
1.只负责UI的呈现
2.没有状态
3.所有数据都有参数提供
4.不适用Redux的API
UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。
二、容器组件和UI组件完全相反
1.负责管理数据和业务逻辑，不负责 UI 的呈现
2.带有内部状态
3.使用 Redux 的 API
UI组件负责页面的呈现。容器组件负责管理数据和逻辑。
三、Redux负责为UI提供容器组件进行状态的管理。React-Redux 提供connect方法，用于从 UI 组件生成容器组件。
import { connect } from 'react-redux'
const todo = <div> Hello </div>
const VisibleTodo = connect()(todo)
在这里就会生成一个名为VisibleTodo的容器组件，没有往里面传入什么参数所以还没有什么实际作用。
为了让容器组件有容器组件该有的功能需要满足两方面的信息
（1）输入逻辑：外部的数据（即
state对象）如何转换为 UI 组件的参数（2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。
四、这里开始放入计时器的部分代码
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span> {value} </span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
定义了一个Counter的组件 它是一个无状态组件它接收{value, onIncreaseClick}的参数。
//开始定义了一个Reducer
function counter(state={count: 0}, action){
const count = state.count
switch(action.type) {
case: 'increase':
return{ count: count + 1}
default:
return state
}
}
connect规定了四个参数常用的是前两个参数
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
(1). 官方定义：[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。如果你省略了这个参数，你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数 ownProps，则该参数的值为传递到组件的 props，而且只要组件接收到新的 props，mapStateToProps 也会被调用
**理解：**可以看到mapStateToProps这个参数必须是个函数，它的作用监听store是否变化，如果变化就是调用这个函数从新计算state的值
function mapstateToProps (state) {
return{
value: state.count;
}
}
它建立了一个state对象到props的映射关系，**1.**它接收 state 作为参数，并返回一个对象，这个对象有一个 value 的属性它代表这UI的同名属性，也可以认为它会为UI组件的this.props.value创建一个映射关系{this.props.value === state.count}当数据变动时就会重新调用mapStateToProps函数来重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
const UI = ({value}) => {
return (
<div>
{value}
</div>
)
}
function mapstateToProps (state,ownProps) {
return{
value: state.count;
//这里的 value 就会传入到 UI 中
}
}
const Us = connect(
mapstateToProps
)(UI)
**2.**第二个参数将代表容器组件的props对象,使用ownProps作为参数后,如果组件参数变化,也会引起UI组件从新渲染
const mapStateToProps = (state, ownProps) => (
return {
active: ownProps.filter === state.visibilityFilter
}
)
connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。
(2). 官方定义:mapDispatchToProps(dispatch, [ownProps]): dispatchProps(Object or Function): 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将action creator的返回值作为参数执行。这些属性会被合并到组件的 props 中。
**理解: ** mapDispatchToProps 他可以做一个函数也可以做一个对象,会到dispatch和ownProps（容器组件的props对象）两个参数。
它定义了哪些用户的操作应该当作 Action，传给 Store。
const mapDispatchToProps = (dispatch,ownProps) => {
return {
onIncreaseClick: () => {
dispatch({
type: 'ONCHANGE',
value: 'Incer'
})
}
}
}
//或者
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
mapDispatchToProps作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。
如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。
const mapDispatchToProps = {
onIncreaseClick: () => {
type: 'ONCHNGE',
value: 'Incer'
}
}
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
问题来了 mapStateToProps如何获得state的呢,mapDispatchToProps是如何传递action的
connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。
React-Redux 提供Provider组件，可以让容器组件拿到state。
官方定义:<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
这样App所有子组件就可以默认拿到state
完整例子:
import React, { Component } from 'react'
// import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span> {value} </span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
//Reducer
function counter(state = {count: 0}, action) {
const count = state.count
switch (action.type) {
case 'increase':
return { count: count + 1 }
default:
return state
}
}
function mapStateToProps(state) {
return {
value: state.count
}
}
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
const increaseAction = { type: 'increase' }
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
const store = createStore(counter)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
state数据的流向问题?
(默认state)Reducer --1--> (store = creactStore(Reducer) )--2--> <Provider store> --3--> (App = connect(...)(Component)) --4-->Component
第一步由 Reducer 构造初始的 state 然后在会通过 第二步 store 保存数据通过 getState() 来获取 state 通过<Provider store> 传向 APP
总结一下
在之前的react-redux 的使用模式下你不需要特殊的处理 redux可以直接写在组件中 但在复杂的项目中为了保持项目中组件的纯度 你常常需要创建 store 文件夹用来管理状态
-store
├── actionCreators.js
├── constants.js
├── index.js
└── reduxcer.js
不用多说这就非常麻烦了，在 constants.js 中编写静态变量 在 actionCreators.js中创建 action Function （生成函数）使用 reduxcer.js用于判断不同的 action 对数据造成的问题
当然到这一步还没有结束，在没有使用 Hook 的情况下每一次编写的组件要明确区分是 容器组件 还是UI组件 这两者最大的不同就是接收数据的问题，前者需要操作数据，后者只是简单的使用传入的数据就行
// 省略 imort
// 容器组件
function App (){
return(
<div></div>
)
}
const mapDispatchProps = (dispatch) => {
change1: (data) => {
dispatch(actionFunction(data))
}
}
const mapStateProps = (state) => {
value: state.value1
}
App = connect(mapStateProps, mapDispatchProps)(React.memo(App))
export default App
redux 是以 Reducer 为主的 状态管理工具 (initState, action) => neweState 参数 InitState 是默认的值，那么通过多个 Reducer 组成的
function (state={}, action){
return {
value1: (state.value1, action) => newState,
value2: (state.value2, action) => newState,
value3: (state.value3, action) => newState,
}
}
由多个 Reducer 组成的函数通过 const store = createStore(Reducer) 这样的方式生成的 Store ，而 Store 可以理解为数据状态的管理中心，可以使用 dispatch({type: ''})来去修改数据，使用 subscribe 去订阅，由于每次都需要编写 带有type 属性的对象去修改数据，那么通常使用 actionCreate()函数来去返回一个对象 { type: 'VALUE', ...} 方便调用更改数据 每一次都需要编写 type 那么将常用的字段提取出来放入一个单独的文件中，那么这就是 redux 简单的使用。
手写一个简单的 React-redux
react-redux 在 redux 外层包裹了一层 react 组件使其能够方便的 react 使用 这里主要看一下核心 API
首先是在全局的根目录下导入 store
// ...
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
简单的看一下做了什么事情 由于和原生组件并不一样这里就简写为了了解其原理：
1、为了能够在全局中使用 store 数据这里使用到了 context
const ReactReduxContext = React.createContext()
2、通过 <ReactReduxContext.provider value={}/> 组件去传递数据并订阅 context
3、之后开始编写 Provider 组件
import {ReactReduxContext} from './ReactReduxContext'
export default function Provider (props){
const {store, children} = props
const contextValue = { store }
return (
<ReactReduxContext.Provider value={contextValue}>
{children}
</ReactReduxContext.Provider>
)
}
provider 组件做的内容就是转发一下 store 以及将子组件放入合适的位置
4、react-redux 将组件分为两大类 容器组件和UI组件 容器组件需要高阶组件 connect 去包裹 如此才能将 store 数据传入 组件的 props 中，将用户的动作通过 dispatch 发出
import {ReactReduxContext} from './ReactReduxContext'
export default function connect(mapStateToProps, mapDispatchToProps) {
return function Componenct(WrappendComponent) {
return function ConnectFunction(props) {
const {...wrapperProps} = props
// 获取 store 数据
const {store} = useContext(ReactReduxContext)
const states = store.getState()
const stateProps = mapStateToProps(state)
const dispatchProps = mapDispatchToProps(store.dispatch)
const propsValues = Object.assign({}, stateProps, dispatchProps, wrapperProps)
return <WrappendComponent {...propsValues} />
}
}
}
5、这里虽然是通过 dispatch 进行更新数据 虽然数据更新但其组件并不没有随之发生改变 所以这里需要去监听数据的变动以跟新组件
1、检查当数据 state 发生变化的时候这里要去检查传给组件的 state （参数）是否一致【为什么是参数？ 因为state 会和参数 props、 stateProps 以及dispatchProps 合并在一起 但最终要检查的是组合在一起的 props】
2、当参数发生改变就要重新渲染组件
将 connect 数据的获取抽离出成一个函数
function childPropsSelector (state, wrapperProps){
const states = store.getState()
const stateProps = mapStateToProps(state)
const dispatchProps = mapDispatchToProps(store.dispatch)
return Object.assign({}, stateProps, dispatchProps, wrapperProps)
}
6、在检查参数的时候 需要获得上次的渲染参数 然后和这次的渲染参数进行对比, redux 采用的是浅比较，如果使用 immer 库对数据进行包裹这样的比较会比较好，而且也不会发生深比较的循环引用问题
function is(x, y){
if(x === y){
return x !== 0 || y !== 0 || 1/x === 1/y
}else{
return x !== x && y !== y
}
}
export default function shallowEqual(objA, objB) {
if (is(objA, objB)) return true
if (
typeof objA !== 'object' ||
objA === null ||
typeof objB !== 'object' ||
objB === null
) {
return false
}
const keysA = Object.keys(objA)
const keysB = Object.keys(objB)
if (keysA.length !== keysB.length) return false
for (let i = 0; i < keysA.length; i++) {
if (
!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
!is(objA[keysA[i]], objB[keysA[i]])
) {
return false
}
}
return true
}
修改 connect 函数的内容
import {ReactReduxContext} from './ReactReduxContext'
import {shallowEqual} from './shallowEqual'
export default function connect(mapStateToProps, mapDispatchToProps) {
return function Componenct(WrappendComponent) {
function childPropsSelector(state, wrapperProps) {
const states = store.getState()
const stateProps = mapStateToProps(state)
const dispatchProps = mapDispatchToProps(store.dispatch)
return Object.assign({}, stateProps, dispatchProps, wrapperProps)
}
return function ConnectFunction(props) {
const { ...wrapperProps } = props
// 获取 store 数据
const { store } = useContext(ReactReduxContext)
const propsValues = childPropsSelector(store, wrapperProps)
const lastChildProps = useRef()
// 保存上一次的 参数
useEffect(() => [(lastChildProps.current = propsValues)], [])
// 监听 store 是否发生变化
store.subscribe(()=>{
const newChildProps = childPropsSelector(store, wrapperProps)
if(!shallowEqual(newChildProps, lastChildProps)){
lastChildProps.current = newChildProps
}
})
return <WrappendComponent {...propsValues} />
}
}
}
7、数据发生改变并且也监听到了 这个时候就要去强制更新 使用 useRedux 去派发 dispatch 从而让组件强制更新
function storeStateUpdatesReducer(count){
return count + 1
}
export default function connect(mapStateToProps, mapDispatchToProps) {
//...
const [, forceComponentUpdataDiaptch] = useReducer(storeStateUpdatesReducer, 0)
store.subscribe(()=>{
const newChildProps = childPropsSelector(store, wrapperProps)
if(!shallowEqual(newChildProps, lastchildProps)){
lastChildProps.current = newChildProps
// 这里去强制组件更新
forceComponentUpdataDiaptch()
}
})
// 。。。
}
8、当然这里还涉及到了更新先后的问题，父组件通过 connect 获取到 redux 中的 store 进行 dispatch 改变数据，子组件也是从 redux 取出 store 从而更新 数据的更新都是派发 dispatch 每一次派发 dispatch 都会保持上一次的数据快照，如果是上面的类型显示是两次单独的数据更新【分别从 redux 中取出 store 数据】显然没有这样的先后关系 可能会引发问题，所以应该保持上一次的 store 在上次的 store 改变之后去更新组件
export class Subscription{
constructor(store, parentSub){
this.store = store
this.parentSub = patentSub
this.handleChangeWrapper = this.handleChangeWrapper.bind(this)
}
// 添加监听器
addNestedSub(listener){
this.listeners.push(listener)
}
// 添加子组件的回调 从而触发更新
notifyNestedSubs(){
const length = this.listeners.length
for(let i = 0; i < length; i++){
const callback = this.listeners[i]
callback()
}
}
// 包装回调函数--- 目的就是为了 在 this.store 下去调用函数
handleChangeWrapper(){
if(this.onStateChange){
this.onStateChange()
}
}
trySubScribe(){
this.parentSub ? this.parentSub.addNestedSub(this.handleChangeWrapper) : this.store.subscribe(this.handleChangeWrapper)
}
}
9、通过 Subscription 来去维护这样的关系 在整个项目中 只有 容器组件 或者说 被 connect()包裹的组件才有机会去使用 diapatch 更新数据 每一次的更新数据后都会改变 store 然后组件更新开始于从父级层层往下直到目前的容器组件 而每一次的更新【派发 dispatch】又都会从上一次的 store 中取到最新值，确保更新顺序
import Subscription from './Subscription';
export default function Provider(props){
const {store, childer} = props
const contextValue = useMemo(()=>{
const subscript = new Subscript(store)
// 回调事件--可以理解为数据发生改变时候要触发的事件也就是 store.subscript(listerne) 中的监听事件 listerne
subscript.onStateChange = subscript.notifyNestedSubs
return {
store,
subscript
}
}, [store])
const previousState = useMemo(()=> store.getState(0) ), [store])
useEffect(()=>{
const {subscription} = contextValue
// 这里去往 subscript 中添加 onStateChange 函数
subscript.trySubscribe()
if(previousState !== store.getState()){
// 这里发现 store 并不是之前的数据了 就会去调用之前存储的监听事件
subscription.notifyNestedSubs()
}
}, [contextValue, previousState])
return (
<ReactReduxContext.Provider value={contextValue}>
{children}
</ReactReduxContext.Provider>
)
}
之后再修改一下 connect 就可以了
import React, { useContext, useRef, useLayoutEffect, useReducer } from 'react';
import ReactReduxContext from './Context';
import shallowEqual from './shallowEqual';
import Subscription from './Subscription
export default function connect(mapStateToProps, mapDispatchToProps){
return function connectHoc(WrappredComponent){
function childPropsSelector(store, wrapperProps){
//...
}
return function connectFunctioon(props){
const {...wrappedn} = props
const contextValue = useContext(ReactReduxContext)
const { store, subscription: parentSub } = contextValue
const actualChildProps = childPropsSelector(store, wrapperProps)
// 保存上一次的 props
const lastChildProps = useRef()
useLayoutEffect(()=>{
lastChildProps.currnt = actualChildProps
}, [actualChildProps])
// 创建一个 reducer 用来强制更新组件
const [,forceComponentUpdateDispatch] = useReducer(storeStateUpdatesReducer, 0)
// 创建 subscription 实例用于确保组件更新的顺序
const subscription = new Subscript(store, parentSub)
const checkForUpdates = () =>{
const newChildProps = childPropsSelector(store, wrapperProps)
if(!shallowEqual(newChildProps, lastChildProps)){
lastChildProps.current = newChildProps
// 强制更新
forceComponentUpdateDispatch()
// 通知 调用其子级为其添加的监听事件
subscription.notifyNestedSubs();
}
}
// 注册这次的监听事件
subscript.onStateChange = checkForUpdates
// 将其放入上一次的 store 中
subscription.trySubscribe()
}
}
}
最后
读写代码都是一件非常不容易的事情，写的很长，我相信能够完整阅读下来的人收获一定满满，技术文章并不是能吃速食就行的，潜下心来安静的阅读完，大家对于 redux 的理解也会更上一层楼。最后也十分推荐大家能跟着我的思路来写一下代码，将自己的代码跑通是非常有意思的事情
参考文章
转载自:https://juejin.cn/post/7159901576771928094