reactjs - 如何从 Action Creator 访问 redux 存储？

Question

我正在考虑尝试将操作链接在一起。在我当前的问题中，当 SET_CURRENT_USER 操作发生时，我希望它修改状态(设置当前用户)，然后触发一堆其他副作用任务(获取数据、重建 UI 等)。我的第一个想法是“好吧，我会在商店上设置一个监听器”...这导致了上一个问题:How to access 'store' in react redux? (or how to chain actions) 在那里，我基本上认为设置监听器是一种反模式。

建议的解决方案是“分派(dispatch)”链接在一起的多个操作。我没有遵循如何做到这一点(我的“mapDispatchToProps”基于redux教程，看起来与建议的mapDispatchToProps完全不同)，所以我做了一些关于如何将副作用操作链接在一起的额外谷歌搜索，并到达此页面:https://goshakkk.name/redux-side-effect-approaches/

尝试第一个示例时，我转到了 Action 创建器文件，如下所示:

(actionCreators.js)

export function setCurrentUser(username) {
    return { type: SET_CURRENT_USER, payload: username }
}

export function actionTwo(username) {
    return { type: ACTION_TWO, payload: username }
}

export function actionThree(username) {
    return { type: ACTION_THREE, payload: username }
}

我尝试将“setCurrentUser”操作创建器更改为类似于演示中的内容，但为了简单起见没有异步部分 - 只是查看操作是否触发:

export function setCurrentUser(username) {
    return dispatch => {
        dispatch( { type: SET_CURRENT_USER, payload: username } );
        dispatch( { type: ACTION_TWO, payload: username } );
        dispatch( { type: ACTION_THREE, payload: username } );
    }
}

在我的应用程序中，我的 mapDispatchToProps 如下所示:

const mapDispatchToProps = {
    setCurrentUser: setCurrentUser,
}

我在 switchUser 处理程序中调用它，如下所示:this.props.setCurrentUser(this.state.newUsername);

...我收到一条错误消息，指出操作必须是普通对象。

如何将操作链接在一起？

也许更深层次的问题是我不知道如何访问商店以便能够调用 store.dispatch。 (这是我之前提到的问题)

Answer 1

我无法发表评论，所以有一个问题:为什么不直接设置 mapState 并将状态作为参数传递给调度操作？

这是组件内容

class AComponent extends Component{
     ...
     ... onClick={()=>this.props.anAction(this.props.state)}
}

const mapStateToProps = state => {
    return { state: state.YourReducer }
}

const mapDispatchToProps = dispatch => {
    return { anAction: () => dispatch(actions.doAnyStaffWith(state)) }
}

export default connect(mapStateToProps, mapDispatchToProps)(BeerReviewer)

Action 文件:

export function actionThree(state) {
     return { type: ACTION_TYPE, state }
}

这就是您要找的东西？