developit / developit/unistore

How to "dynamically" `connect` to different states with React/Preact?

Open
#195 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
134
PR merge metrics
No merged PRs in 30d

Description

I see that connect can be used like this:

`connect( [ 'var1', 'var2' ], actions )`

Which works well... however I want to init a component, and pass the state name into it somehow...

The problem: I have a store, which based on user interaction (from the dom) will create a new state object eg `state.field_${id}`, and then dynamically render a Preact component... I want to pass down the state name / ID into a preact component/wrapper so it can `connect` to its own state object - `field_${id}`,

The only thing I can think of, is to just connect it to the whole state, pass in the ID, and then filter that out manually...
````
const allState = ( state ) => {
return state;
};
export const MyComponent = connect(
allState,
actions
)( ( props ) => {
const myState = props[ `field_${ props.id }` ];
return <>...;
} );
````
But it doesn't sit right with me, and the component would naturally re-render on any state change rather the part we're after... .

Is this possible / are there any other approaches I might have missed?

Thanks!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.