react-native-sortable-list icon indicating copy to clipboard operation
react-native-sortable-list copied to clipboard

Use with Redux

Open ppetrick opened this issue 6 years ago • 3 comments

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.

ppetrick avatar Sep 26 '18 08:09 ppetrick

Just use this fork. Change your package.json:

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

From pull request

damikdk avatar Nov 09 '18 17:11 damikdk

@ppetrick Did you manage to solve this?

scaralfred avatar Nov 30 '18 10:11 scaralfred

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

thehunter5 avatar May 26 '19 11:05 thehunter5