I'm creating a ponent that handles the state with Redux architecture (yes, this is probably bad by definition because a ponent should delegate the state to the app but anyway).

This ponent accepts different props. My problem es when I have to handle a callback. Let's put a practical example to picture this better.

Let's say we need a ponent like <App onSubmit={() => {}} />.

We could create a store when the ponent gets mount, so then all inner ponents can dispatch actions/subscribe changes/etc.

The attempt could be to have an action called submit(). This way the store will know there's a change to apply so any subscriber will know and somebody will call this onSubmit callback.

So the code would look like:

class App extends Component {
  constructor (props) {
     super(props)
     this.subscriber = this.subscriber.bind(this)
  }
  ponentWillMount() {
    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>
    )
  }
}

The problem is that, although subscriber is called on every action dispatched, subscriber can't know what was the last action dispatched. So there's no way to know when to call onSubmit.

• How can we use subscriber to know changes on the store?
• Should I stop trying a redux arquitecture in here?

I'm creating a ponent that handles the state with Redux architecture (yes, this is probably bad by definition because a ponent should delegate the state to the app but anyway).

This ponent accepts different props. My problem es when I have to handle a callback. Let's put a practical example to picture this better.

Let's say we need a ponent like <App onSubmit={() => {}} />.

We could create a store when the ponent gets mount, so then all inner ponents can dispatch actions/subscribe changes/etc.

The attempt could be to have an action called submit(). This way the store will know there's a change to apply so any subscriber will know and somebody will call this onSubmit callback.

So the code would look like:

class App extends Component {
  constructor (props) {
     super(props)
     this.subscriber = this.subscriber.bind(this)
  }
  ponentWillMount() {
    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>
    )
  }
}

The problem is that, although subscriber is called on every action dispatched, subscriber can't know what was the last action dispatched. So there's no way to know when to call onSubmit.

• How can we use subscriber to know changes on the store?
• Should I stop trying a redux arquitecture in here?

• javascript
• reactjs
• redux

1 Answer 1

This is an anti-pattern in Redux.

There is no such thing as “the last action” because Redux reserves the right to notify you just once in case of several nested dispatches.

Instead, you should perform the local side effect together with the action. Redux Thunk is a popular way to do this. If you need more decoupling, you might enjoy Redux Saga instead.