页面发布-分发dispatch(action(:object),action已被connect(mapStateToProps, mapDispatchToProps)(App)映射到组件props )
reducer里的纯函数执行,拿到action里返回的对象数据,赋值给redux中的Store,reducer文件 与action文件都是返回store所需对象数据,两个文件对这个对象处理再次细分了,
reducer 纯粹赋值 action 对数据的来源,或对数据加以标记等
function createStore(reducer) {
var state;
var listeners = []
function getState() {
return state
}
function subscribe(listener) {
listeners.push(listener)
return function unsubscribe() {
var index = listeners.indexOf(listener)
listeners.splice(index, 1)
}
}
function dispatch(action) {
state = reducer(state, action)
listeners.forEach(listener => listener())
// listeners.forEach(listener => listener.apply(this,action)
/*
*普通观察者应该是在订阅回调函数中处理分发时传的参数,这里很巧妙的用了实例化时外部传入的reducer纯函数,
*这样 订阅的回调函数 就让reducer来操作了
*而listener订阅回调暂时是对组件的更新,subscribe是在connect连接时订阅的
*/
}
dispatch({})
return { dispatch, subscribe, getState }
}
这里是connect用于理解的代码
//connect()是一个将Redux相关的道具注入组件的函数。
//您可以注入数据和回调,通过调度操作更改数据。
function connect(mapStateToProps, mapDispatchToProps) {
//它让我们注入组件作为最后一步,这样人们就可以使用它作为装饰。
//一般来说你不需要担心。
return function (WrappedComponent) {
//它返回一个组件
return class extends React.Component {
render() {
return (
//呈现组件
)
}
componentDidMount() {
//在componentDidMount它记得订阅商店,这样就不会错过更新
this.unsubscribe = store.subscribe(this.handleChange.bind(this))
}
componentWillUnmount() {
//稍后取消订阅
this.unsubscribe()
}
handleChange() {
//每当存储状态改变时,它就会重新呈现。
this.forceUpdate()
}
}
}
}
//这不是真正的实现,而是一个心智模型。
//它跳过了从何处获取“存储”的问题(答案:将其放在React上下文中)
//它跳过了任何性能优化(real connect()确保我们不会徒劳地重新渲染)。
//connect()的目的是不必考虑
//订阅应用商店或自己进行性能优化,以及
//相反,您可以指定如何基于Redux存储状态获取道具:
const ConnectedCounter = connect(
//给定Redux状态,返回道具
state => ({
value: state.counter,
}),
//给定Redux调度,返回回调道具
dispatch => ({
onIncrement() {
dispatch({ type: 'INCREMENT' })
}
})
)(Counter)