Question: Any advice if my list of dynamic components is also not static? [@redux-dynostore/react-redux]

[MillerGregor]

For my needs, I'd like to create dynomic components from a list of identifiers that isn't static. This list would ideally be in a separate slice of the redux state.

I implemented this in my app, but am running into recursive update problems.

Here's a codesandbox with the counters example, modified to illustrate:
https://codesandbox.io/s/1r2wwjp2pl

Can anyone suggest an idea to make this work?
thanks

[mpeyper]

Hey,

The issue was caused by calling Counter.createInstance(id) inside a render function. This creates a new higher-order component which should not be done inside a render method.

Here's a fork of your codesandbox that works, take particular note of the DynaCounter component:
https://codesandbox.io/s/l7knkmp089

[mpeyper]

I've seen this type of issue come up a few times where people have wanted to use a dynamic identifier. I'm wondering if there is some way we can support this?

From the top of my head, one option might be to accept an identifier as a prop that overrides the provided one, e.g.

const App = ({ counters, dispatch }) => {
  const action = (type, value) => () => dispatch({ type, value })
  return (
    <div>
      <div>
        {counters.map(id => {
          return <Counter key={id} identifier={id} />
        })}
      </div>
      <button onClick={action('ADD', 'three')}>add "three"</button>
    </div>
  )
}

This would make the createInstance functionality a bit moot though.

It would also allow for index based identifiers a bit easier, e.g. "counter1", "counter2", "counter3", etc.

[MillerGregor]

Excellent - thank you.

I should have figured that out. It's easy (for me) to forget that the whole body of a functional component is the render function.

A component like you suggest might be very useful. It's the declarative option to the imperative createInstance().

[MillerGregor]

@mpeyper,

If you'd rather not add a component to the library, I'd be happy to add this example via PR. Let me know.

[mpeyper]

I think the example is worth it, regardless of whether we implement the feature.

My only thought is that the example got a bit wonky if you pressed the "add three" button multiple times. If it could "add three", then "add four", etc. that would be better.

@jpeyper what do you think about an identifier prop?

[mpeyper]

@Gregor1971 it would be fun if you could have a counter control the number of counters to display 😆

[jpeyper]

I was wondering about this the other day when answering the other issues.

It actually makes more sense to me than the current approach.

[mpeyper]

Do we have both or remove createInstance?

This has me thinking about #9... I think we could provide a withExtraState like functionality by passing the props into the enhancers and letting then choose either their provided options or and override from props.

e.g. change this line to something like this.EnhancedComponent = dynamicEnhancer(context.store)(Component, props)

[MillerGregor]

@mpeyper

it would be fun if you could have a counter control the number of counters to display 😆

Wouldn't be difficult... but I like to keep example code as simple as possible. 😄

My only thought is that the example got a bit wonky if you pressed the "add three" button multiple times. If it could "add three", then "add four", etc. that would be better.

yeah, that was quick and dirty. the PR is slightly less dirty... I added a text input for the identifier.

[mpeyper]

Cool. I'll take a look a bit later.

[mpeyper]

Closing. Please see #484 for details.