Use with Redux

[ppetrick]

I'm probably missing something obvious, but for the life of me, I can't figure out how to use this properly with Redux.

      <SortableList
        data={this.props.list}
        order={getListOrder(this.props.list)}
        onChangeOrder={this.reorderItem}
        onReleaseRow={this.releaseItem}
        renderRow={item => <ListItem item={item} />}
      />

this.props.list is the list object pulled from Redux. Each list object holds it's own order attribute (which is what the function getListOrder extracts into an array).

Here's what I don't understand:

1. if onChangeOrder modifies the list (prop) via Redux, things get completely wonky because it re-renders each time items are moved
2. onReleaseRow can't be used to update Redux because it doesn't have any information about the change in order. I could read the new ordering from local State upon onReleaseRow, but any attempt to save changes to local State cause the same issues outlined in 1 because of the re-render.

So what exactly does a canonical example of this with Redux look like? I'm sure I'm missing something.

[damikdk]

Just use this fork. Change your package.json:

"react-native-sortable-list": "github:atopus/react-native-sortable-list",

From pull request

[scaralfred]

@ppetrick Did you manage to solve this?

[thehunter5]

I am facing the same issue. Could you please tell how you managed to solve this if you did?