0

I'm designing a navigation controller (based loosely around the mobile version of this: https://developer.apple.com/documentation/uikit/uinavigationcontroller

I would like to allow for push and pop functionality of a collection of views (which the user can navigate from). The question is, where do I store my collection of components.

For example if I make an action like:

export function pushViewController(view) {}

Can I push that in a reducer that has a state collection of views like so (obviously creating a new slice of state while doing so, not actually 'pushing' so as to avoid confusion that I'm mutating state here):

const initialState = { views: [<View />] }

I've done a little reading but have seen varying opinions on whether or not this is 'ok' practice in Redux. Is pushing views this way even proper form? Would love some input on this, thanks in advance.

Xelad1
  • 175
  • 1
  • 18
  • It's totally fine. Just keep in mind you can't serialize that state for localstorage purposes or otherwise, but for a running app it's perfectly "proper". – azium Jun 23 '17 at 22:47

1 Answers1

1

No. That's technically possible, but is a bad idea on a couple levels.

First, your Redux state should be only serializable JS values.

Second, assuming that you're talking about React components, you'd be putting the descriptive objects into the store, not references to the actual component instances.

Third, those React descriptive objects themselves use Javascript Symbols, which are not serializable.

Now, a variation on this that would be okay is something like the technique Dan Abramov describes in How can I display a modal using Redux?.

markerikson
  • 63,178
  • 10
  • 141
  • 157
  • So I guess my next question would be: how do we make something like this happen. Would I then try and add views to the props of the controller? Where is the proper place to keep reference to a 'collection' of react views if we're making a controller that can add views dynamically. – Xelad1 Jun 24 '17 at 23:43
  • Well, first issue is I've never used RN or a "navigation controller". Second, a normal React app only rarely gets real references to component instances - you just render descriptions of the UI and let React handle updating. You might want to browse through the source for other libs out there, like https://github.com/react-community/react-navigation . Also, see https://www.youtube.com/watch?v=tWitQoPgs8w and https://medium.com/the-react-native-log/thousand-ways-to-navigate-in-react-native-f7a1e311a0e8 for info on other RN navigation libs. – markerikson Jun 25 '17 at 02:24
  • Yeah this is sort of a weird project (and I don't know if this comment section is the place for discussion). I'm technically not even writing a RN app but some web components with mobile 'like' functionality. – Xelad1 Jun 25 '17 at 19:42
  • I suppose to distill a simpler question: What would be 'proper' form for allowing a user to press a button and generate a new react component on the fly, and where should I be storing them for easy access? I feel like my approaches to this would all be traditionally considered 'bad practice'. – Xelad1 Jun 25 '17 at 19:48
  • Depends on what you mean by "generate a new React component". If you mean "show existing component `B` instead of `A`", then it's just a matter of rendering `` instead of ``. If you mean actually defining new React component classes on the fly, that's generally not a good idea. It sorta feels like your questions are based on a misunderstanding of React. You might want to spend more time reading about how React works. You could also come ask questions in the Reactiflux chat channels on Discord, at https://www.reactiflux.com . – markerikson Jun 25 '17 at 23:11