首页 文章

Redux:如何在状态更改后调度操作

提问于
浏览
0

这是一个之前已经讨论过的主题,但我仍然没有找到我喜欢的答案,并且会喜欢一些建议 .

我有以下问题 . 我的应用程序包含一个名为 CREATE_RESPONSE 的操作,它会创建一个新的响应记录并将其推送到 responses 状态 . 当用户单击按钮时,将从我的组件调度此操作的操作创建者 .

onClick={() => {
    this.props.createResponse();
}}

现在,在用户执行此操作后,我想为此新响应打开一个模态 . 此模式依赖于新的响应状态更改,因此必须在 createResponse 之后发生 .

对我来说最直观的解决方案是使用回调,但我相信这代表了Redux的反模式 .

另一种方法是监听响应状态更改,然后每当响应数量发生更改时调度操作(类似于订阅示例:http://redux.js.org/docs/api/Store.html#subscribe

function responses(state) {
  return state.responses.size
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = responses(store.getState())

  if (previousValue !== currentValue) {
    // Dispatch action here
  }
}

store.subscribe(handleChange)

这里的问题是我们正在响应满足这种条件的所有状态变化 . 在我的应用中,这在页面加载时被错误地触发 .

所以我的问题归结为:为响应状态变化而派遣行动的最佳方式是什么?

编辑

以下是我的Modal和Response reducers的简化版本:

语气

const modalState = Immutable.Map({
    isOpen: false,
    view: null,
    modalProps: {}
});

export const modal = (state = modalState, action) => {
    switch (action.type) {
        ...
    }
}

回应

const responseRecord = Immutable.Record({
    id: null,
    ...
});

export const responses = (state = Immutable.List([]), action) => {
    switch (action.type) {
        case 'CREATE_RESPONSE':
            newResponse = new responseRecord(...);

            state = state.unshift(newResponse);

            return state;
        ...

1 回答

  • 1

    您可以在模态减速器中为 CREATE_RESPONSE 设置一个案例 . 每个动作都会通过每个减速器运行 . 大多数情况下,它会很快达到默认值 . 但如果你想要,你可以听 CREATE_RESPONSE 并将 isOpen 设置为true .

    虽然我也不需要.660626 . 您可以将 newRecord 添加到全局状态,而不是 isOpen 标志 . 将模态定义为:

    <Modal show={this.props.newRecord}...
    

    并且在模态调度关闭时执行的任何操作中清除 newRecord . 可能有必要在 responses 减速器中听取该动作,但这是合法的 .

    (我玩得有点快,因为 newRecord 不是布尔值 . 它应该可以工作,虽然你也可以强制它作为 !!newRecord 的布尔值,或者直接检查是否为null)

    这应该解决在页面加载时打开它的问题 . Modal完全按照它应该做的:只要有新记录就打开,没有任何明确的命令 . 您只需让React管理其可见性 .

相关问题