function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(myActions, dispatch) }
}
实际上,您将操作 Package (绑定)到调度方法;
function bindActionCreators(actions, dispatch) {
// this is a very trivial implementation of what bindActionCreators does
let wrappedActions = {};
Object.keys(actions).forEach(action =>
// for every action, return a function that calls dispatch on the result of what your action returns
return function(...args) {
// remember here that dispatch is the only way you can communicate with the reducers and you're action's type will determine which reducer responds to return the new state
return dispatch(actions[action](..args));
}
);
}
const dispatch = (action) => {
// execute the middleware chain, passing in the action
const result = middlewareChain(action);
// update the store with the new state returned by the middleware
currentState = result;
// trigger any subscribed listeners to update the UI
for (const listener of listeners) {
listener(currentState);
}
}
3条答案
按热度按时间cl25kdpy1#
@mariazahid mapDispatchToProps会将操作绑定到组件,以便您可以将其传递到表示组件。这是一种在使用Redux和React时通常使用的模式。
你可以导入你的动作并且仅仅分派动作,但是在大多数场景中使用容器-〉组件模式,容器是动作Map到的地方,状态和组件的唯一目标是将数据传递给用于呈现数据的组件。
在团队中工作时,这是一种很容易采用的模式。您只需了解容器以及它如何将所需的操作/数据传递给孩子,而不是从左到右或从中心导入操作。
jjhzyzn02#
从实现的Angular 来看,
dispatch
只是用于与Reducer通信的方法假设您的操作如下所示
您正在尝试与响应操作类型“MY_ACTION”的Reducer通信
在
mapDispatchToProps
中,通常会执行以下操作;实际上,您将操作 Package (绑定)到调度方法;
因此,这些“绑定”操作现在被分配给组件中的
props.actions
。dhxwm5r43#
此实现假定存在包含一个或多个中间件函数(如redux-thunk中间件)的middlewareChain数组。当使用操作调用dispatch时,它执行中间件链,并将操作作为参数传递。每个中间件函数都能够修改操作,或根据需要分派其他操作。
中间件链执行完毕后,dispatch会使用中间件返回的新状态更新存储的currentState,最后,dispatch会触发任何订阅的侦听器(如React组件)使用新状态更新UI。