redux ,react-redux梳理，以及源码的学习

Posted 2021-03-16 yayaxuping

React

Store:提供的方法{

store.dispatch()

store.subscribe(() => {

this.forceUpdate();

// this.setState({});

});

store.getState()

}

// import { createStore, applyMiddleware } from "redux";

import { createStore, applyMiddleware } from "../kredux";

// import thunk from "redux-thunk";

// import logger from "redux-logger";

// 初始话，状态的修改

function counterReducer(state = 0, action) {

console.log("state", state);

switch (action.type) {

case "add":

return state + 1;

case "minus":

return state - 1;

default:

return state;

}

}

// const store = createStore(counterReducer, applyMiddleware(thunk, logger));

const store = createStore(counterReducer, applyMiddleware(thunk, logger));

function logger() {

return dispatch => action => {

console.log(action.type + "执行了！");

return dispatch(action);

};

}

function thunk() {

return dispatch => action => {

console.log(555)

if (typeof action === "function") {

return action(dispatch);

}

return dispatch(action);

};

}

export default store;

//中间间做了什么处理

Reducer:传入的对象直接更新状态

如果传入的是function,需要中间见thunk,然后执行reducer

源码解析

export function createStore(reducer, enhancer) {

if (enhancer) {

return enhancer(createStore)(reducer);

}

let currentState = undefined;

const listeners = [];

function getState() {

return currentState;

}

function dispatch(action) {

currentState = reducer(currentState, action);

listeners.map(listener => listener());

}

function subscribe(listener) {

listeners.push(listener);

}

dispatch({ type: "@@REDUX/OOOOOOO" });

return {

getState,

dispatch,

subscribe

};

}

export function applyMiddleware(...middlewares) {

return createStore => (...args) => {

const store = createStore(...args);

let dispatch = store.dispatch;

const midAPi = {

getState: store.getState,

dispatch

};

const chain = middlewares.map(mw => mw(midAPi));

console.log(‘chain....‘+chain)

dispatch = compose(...chain)(dispatch);

return { ...store, dispatch };

};

}

function compose(...funcs) {

const len = funcs.length;

if (len === 0) {

return arg => arg;

}

if (len === 1) {

return funcs[0];

}

return funcs.reduce((a, b) => (...args) => a(b(...args)));

}

1,react-redux

1,通过Provider,存储store={store}

<Provider store={store}>

<App />

</Provider>,

// 源码的解析，定义context,用于传递store

const ReduxContext = React.createContext();

export function Provider({ store, children }) {

return (

// children 组件复合

<ReduxContext.Provider value={store}>{children}</ReduxContext.Provider>

);

}

2，

2，export default connect(

//mapStateToProps

state => ({ counter: state.counter }),//通过一个函数，传递state,返回一个state

//mapDispatchToProps

{

add // 函数一个对象返回，定义函数，函数返回action

}

)(ReactReduxPage); //外面调用一个类或者function,的处理，返回 dispatch(add())

源码解析

import React, { useContext, useState, useEffect } from "react";

export const connect = (

mapStateToProps = state => state,// 1，初始化，一个函数传入一个state,返回一个state

mapDispatchToProps = {} 2，初始化，由一个空对象返回的方法

) => Cmp => props => {

const store = useContext(ReduxContext); //3，获取store

const getMoreProps = () => {

const stateProps = mapStateToProps(store.getState()); //4，获取state，用于把state映射到props上

const dispatchProps = bindActionCreators(

mapDispatchToProps, //这是一个方法组成的对象，如add方法等

store.dispatch

);// 返回的是dispatch(action)

return {

...stateProps, //存储的是state

...dispatchProps //存储的是dispatch方法，比如add等

};

};

// 函数的副作用，当state，发生变化，执行setMoreProps

useEffect(() => {

store.subscribe(() => {

setMoreProps({

...moreProps,

...getMoreProps()

});

});

}, []);

const [moreProps, setMoreProps] = useState(getMoreProps());

return <Cmp {...props} {...moreProps} />;

};

//actionCreator是add方法

//，执行add，返回的不就是一个action，比如{type: ‘add‘}

function bindActionCreator(actionCreator, dispatch) {

return (...args) =>{

console.log(‘args=====‘,...args)

dispatch(actionCreator(...args));

}

}

//给actionCreators所有的方法绑定上dispatch

function bindActionCreators(actionCreators, dispatch) {

let obj = {};

for (let key in actionCreators) {

obj[key] = bindActionCreator(actionCreators[key], dispatch);

}

return obj;

const store = createStore(

combineReducers({ // 封装多个reducer

counter: counterReducer,

user: loginReducer

})

);

useEffect的第二个参数必须传空数组，这样它就等价于只在componentDidMount的时候执行。如果不传第二个参数的话，它就等价于componentDidMount和componentDidUpdate