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