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