How to Integrate Griddle into existing Redux Store // extraData not passed to customComponent

[Isarstyle]

Griddle version 1.2

Expected Behavior

connect(props, dispatch)(Button) on customComponent connects to main App Redux Store

Actual Behavior

i did a connect(props, dispatch)(Button) on a custom component, but it just connects to the internal griddle redux store, and not to my main Redux store.

Steps to check

the passed store object i get in my custom rows is just the griddle store object, not the main one with the data i need

Do you have a solution for this problem? Thank You

#621 Is linked to the same problem, i use the redux store to show stateless modals.

EDIT: found out that extra data has been removed from api, still exists in the Columndefinition... how can i get the extradata back? //Any extra data that should be passed to each instance of this column extraData: React.PropTypes.object,

EDIT2: Found it! in the cellcontainer.js the data is not passed to the customComponent, therefore no access! <props.customComponent extraData={props.cellProperties.extraData} value={props.value} griddleKey={props.griddleKey} />

[ryanlanciaux]

This is kind of a bug right now. We are working on making it so Griddle doesn't use "store" as it's store key name for this very reason.

There is a kind of hacky work-around right now that is not a great solution where you can add the app store to context as another name. From there, you can wrap your custom component in a component that gets the app store from the context (keyed by the other name) and passes that in as store prop to your component your connection (there are other ways to with changing store name in connect, etc, as well).

We're trying to make this a nicer experience in the near future. Sorry you're bumping into this!

[Isarstyle]

maybe there is a way to add the griddle store to the main provider? example: redux toaster this package is combining it with the reducers, to add a griddle-reducer to my store would be working for me. I just did not want to change the main griddle file, to be compatible to updates :)

I solved it by passing my redux dispatch actions and the store to the extraData, works for me.

[umgupta]

@ryanlanciaux : Any ETA on this, or thoughts on this ? I need griddle states to be maintained in global store. I would really like if I could in some way integrate global store to griddle.

If you have any implementation idea, I can take this up too :)

[dan3721]

• 1 for ETA?

[dahlbyk]

EDIT: found out that extra data has been removed from api, still exists in the Columndefinition... how can i get the extradata back? //Any extra data that should be passed to each instance of this column extraData: React.PropTypes.object,

EDIT2: Found it! in the cellcontainer.js the data is not passed to the customComponent, therefore no access! <props.customComponent extraData={props.cellProperties.extraData} value={props.value} griddleKey={props.griddleKey} />

extraData has been implemented in https://github.com/GriddleGriddle/Griddle/pull/675.

[archy-bold]

Is there a version of Griddle >1.0 that isn't affected by this bug? I really don't like the idea of updating my components to work around this.

[dahlbyk]

Check out https://github.com/GriddleGriddle/Griddle/issues/647 for additional discussion related to this issue.

[aftabnaveed]

@dahlbyk extraData to the ColumnDefinition seems to be not working, here is my code

<ColumnDefinition id="Actions" customComponent={ActionsColumn} extraData={fetchUsers} />

I am unable to access it my custom component which in this case is ActionsColumn.

[dahlbyk]

@aftabnaveee is fetchUsers a function, perhaps? Keys from extraData are copied into props, so passing a function directly won't do anything.

I expect extraData={{fetchUsers} will expose a fetchUsers prop for you.

[aftabnaveed]

fetchUsers is a redux action creator which is passed from my HOC. Here is my custom component

const ActionsColumn = (props) => {
    console.log('extraData', props.extraData); //this logs undefined
    return(
        <div>
            <ViewLinkButton path={url("user/view/"+props.value)} />
            <EditLinkButton path={url("user/edit/"+props.value)} />
            <DeleteButton onClick={() => { console.log('Delete ', props.value) }} />
        </div>
    );
};

[aftabnaveed]

Never mind I missed this part

Keys from extraData are copied into props

Thanks.