javascript - 如何从商店本身获取在商店上调度的最后一个操作类型?

标签 javascript reactjs redux

我正在创建一个使用 Redux 架构处理状态的组件(是的,这从定义上来说可能很糟糕,因为组件应该将状态委托(delegate)给应用程序,但无论如何)。

此组件接受不同的属性。当我必须处理回调时,我的问题就出现了。让我们举一个实际的例子来更好地描述这一点。

假设我们需要像 <App onSubmit={() => {}} /> 这样的组件.

当组件挂载时,我们可以创建一个存储,这样所有内部组件就可以分派(dispatch)操作/订阅更改/等。

尝试可能是执行名为 submit()操作 。这样商店就会知道有要应用的更改,因此任何订阅者都会知道,并且有人会调用此onSubmit回调。

所以代码看起来像:

class App extends Component {
  constructor (props) {
     super(props)
     this.subscriber = this.subscriber.bind(this)
  }
  componentWillMount() {
    this.store = createStore()
    this.store.subscribe(this.subscriber)
  }
  subscriber (action) {
    if (action.type === 'submit')
      this.props.onSubmit()
  }
  render () {
    return (
      <Provider store={this.store}>
         <FooComponent />
      </Provider>
    )
  }
}

问题是,虽然subscriber在调度的每个操作上都会调用,订阅者无法知道最后调度的操作是什么。所以没有办法知道什么时候调用onSubmit .

  • 我们如何使用 subscriber了解商店的变化?
  • 我应该停止在这里尝试 redux 架构吗?

最佳答案

这是 Redux 中的反模式。

不存在“最后一个操作”这样的事情,因为 Redux 保留在出现多个嵌套调度的情况下仅通知您一次的权利。

相反,您应该将局部副作用与操作一起执行。 Redux Thunk 是一种流行的方法。如果您需要更多解耦,您可能会喜欢 Redux Saga。

关于javascript - 如何从商店本身获取在商店上调度的最后一个操作类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38509964/

相关文章:

javascript - 如何在react-tabulator中插入新行

javascript - 如何使用 safari 缓存 react 触发 componentDidMount?

javascript - ReactJS 当我使用 Redux 时所有组件都是类组件,这正常吗?

javascript - 子组件不会重新渲染,但父组件会重新渲染。如何让子组件重新渲染?

javascript - AngularJs:具有动态 Controller 名称的 $routeProvider 将不会加载

javascript - 返回操作的语法不正确

javascript - 如何在外部 JS 脚本运行完成后运行函数

javascript - 在没有收到 ContentEditable 警告的情况下呈现 ContentEditable 组件?

redux - 如何将状态 sanitizer 与 React-Redux 中的现有中间件结合起来

javascript - 在尽可能多的列中堆叠 html 页面中的图像