redux-query-sync icon indicating copy to clipboard operation
redux-query-sync copied to clipboard

replaceState per parameter?

Open vincerubinetti opened this issue 5 years ago • 4 comments
trafficstars

Thank you so much for this library. It's saved me so much hassle, and I think it's the correct way to think about state and url as a window into the state.

Currently we have a global option replaceState to say whether each change to the state should update the url by replacing it (not creating a back/forward history entry) or pushing to it (creating a back/forward history entry). Is it possible to have this option on a per-parameter basis, such that changes to some parameters don't create the entry, but some do?

Going even further, could we get the new and previous values and decide based on that whether to push or replace? So it would look something like this:

ReduxQuerySync({
    store,
    params: {
        p: {
            selector: state => state.pageNumber,
            action: value => ({type: 'setPageNumber', payload: value}),
            replaceState: (value, prevValue) => someLogic ? true : false
        },
    }
})

This might be overcomplicating things though. I can explain my use case if need be.

If this is not on the roadmap, do you have a recommended way to implement this ourselves?

vincerubinetti avatar May 01 '20 14:05 vincerubinetti

Glad you like it!

This module could be modified to allow passing a replaceState option for individual params that would override the ‘global’ replaceState option.

It would need some changes in the handleStateUpdate function; I suppose it could check which parameters are being modified, and use history.push if the replaceState option is false for at least one of the modified parameters. Alternatively, it could run two rounds: change all ‘replace’ parameters, then change all ‘push’ parameters (or vice versa; not sure what behaviour we’d want the browser’s back button to have).

Actually, the latter two-step behaviour may be possible without any change to this module. If you’d simply use this model twice, once with the ‘push’ params, once with the ‘replace’ params, then if all is correct these will independently modify the window location. Or if not all is correct, it might mess up or end up in an infinite loop where the two invocations undoing each other’s modifications (which I’d consider a bug; the module should not interfere with location changes unrelated to the parameter names passed to it). I am curious which of these two possible worlds we live in.

Treora avatar May 02 '20 11:05 Treora

Actually I should mention that I was able to solve my issue simply with the use of the defaultValue option which I didn't see before. Though I could still see myself using this in the future. The case would be: where I want a parameter to be in the url (say for sharing purposes), but that parameter isn't important enough to warrant its own undo/redo entry (via the back/forward history).

So perhaps since it would be some work, and possibly some breaking changes, you should just wait to see if there's anyone else interested in this feature. See if this issue gets some 👍 's.

vincerubinetti avatar May 02 '20 19:05 vincerubinetti

I need this above behaviour for my project. I need to replace in some cases and push in other case. It would be great if we implement this behaviour. @vincerubinetti can you guide me how exactly did you solve this issue with defaultValue

deepakgupta25 avatar Oct 14 '22 14:10 deepakgupta25

@deepakgupta25 I don't think I can help you there. What I think I meant by using defaultValue is that I needed, well, a default value... and I was looking to use replace the first time, then push all subsequent times. At least I think that's what I was looking for; this was 2 years ago and I don't even remember the project this was for.

If you really need arbitrary switching back and forth between replace and push, you'd need the library to implement it as requested.

vincerubinetti avatar Oct 14 '22 17:10 vincerubinetti