When using alternative state management, how to keep one source of state?

[swennemans]

I'm using Mantra with Redux, everything is working fine however I do have a question about implementation details. I would like to keep my whole state in my Redux reducer.

An example

To ,hopefully, make my point more clear, I have a example.
Say you want to add pagination in a non-reactive datasource. I can load my initial data in the composer function. And this data would be stored on for example props.contacts. If I want to load the next page, I would have to call this same function again with different arguments, then store the results preferably on props.contacts again. However, I don't have access to props.contacts or in somewhat limited way (for example manual caching). Therefore, I would like to store my results immediately in my Redux store (or LocalStorage). And create an action (or route change) for the next calls, that stores the received data on the same props.

If this doesn't make sense, please let me know. I'm a little bit hazy on my Meteor concepts :)

In order to achieve the above example, I have altered my composer function as follows:

export const composer = ({context}, onData) => {
  const { Meteor, Collections, Tracker, Store} = context()
  const { dispatch, getState } = Store

  //this part feels a bit hacky
  if (Meteor.subscribe('listUsers').ready()) {
    const users = Meteor.users.find().fetch()
    //save in redux store
   dispatch({
      type: 'contacten/LOAD_CONTACTS_SUCCESS',
      users: users
    })
  }

  //listen to redux store change
  onData(null, {
    contactsStore: getState().contactsReducer
  })
  return Store.subscribe(() => {
    onData(null, {
      contactsStore: getState().contactsReducer
    })
  })

}

This feels a bit hacky. The part where I retrieve the user info, store it in my Redux store, and then listen to this in the onData function feels weird.
As an alternative I can call an action from componentWillMount from my container component, however this will basicly do the same.

Any thoughts?

[arunoda]

This code works, but I think you use the stored data on the Redux inside another container. If not, why can't you simply set the contactsStore once you get the data?

[swennemans]

Thanks for replying, and yes the code works but I'm trying to find the best way :)
What do you mean exactly with the last sentence? Do you mean that you would set the contactsStore in my top React component when receiving props? Or would you change the composer function? Could you elaborate a bit?

[arunoda]

I mean, here you can do like this:

export const composer = ({context}, onData) => {
  const { Meteor, Collections, Tracker, Store} = context()
  const { dispatch, getState } = Store

  //this part feels a bit hacky
  if (Meteor.subscribe('listUsers').ready()) {
    const users = Meteor.users.find().fetch()
    //save in redux store
    onData(null, {
      users
    })
  }
}

Without the use of Redux.

[arunoda]

If you want to use this subscribed data inside somewhere else, you could put it to redux from your original container and get that from some other component like this:

export const composer = ({context}, onData) => {
  const { Store } = context()
  const { getState } = Store;

  //listen to redux store change
  const sendData = () => {
    onData(null, {
      contactsStore: getState().contactsReducer
    });
  };

  sendData();
  return Store.subscribe(sendData);
}

But, I don't think that's a good solution. Since it has not use of data subscribing. Basically, here we need to find a way to deal with Meteor data and redux, not necessarily with Mantra.