redux-loop | A library that ports Elm 's effect system to Redux | State Container library

What is redux-loop and what is the main purpose of using it in a React Native Application?

I've changed my Android device from Android 7.0 to Android 8.0 to run a react-native app on. Previously adding the overlay permission in AndroidManifest allowed the app to run and display the developer menu on the device:

I have made a simple react app with the sample code from the following blogpost, which I leave only as a citation. I am otherwise new to the javascript ecosystem and am trying to fit together several unfamiliar tools (in order to learn them).

https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f

Relevantly, my store.js looks like this:

I run redux-loop official example with a little change:

1. Instead of fetch I use promise with a timeout.
2. I added log middleware (copy-paste from redux.js.org tutorial).

side-effect function:

I'm trying to navigate to the previous screen after a redux action. I'm using react-router with react-router-redux and redux-loop.

Here's the scenario:

1. On the home screen that there's a list of users /home.
2. Tap on a user to go to their profile /home/profile/1234.
3. Edit users name and tap save this.props.dispatch(UserState.updateUser(id, user, history).
4. Once the user is updated successfully, go back to the home screen /home.

Here's some code:

View:

so i've come across a strange issue where the Provider component wont work when i try and host my website. If i want to run it locally using yarn start it works fine with the Provider. I'm pretty sure my hosting setup is correct as if i replace the Provider with a jsx component it displays that jsx page. Heres what i have at the moment in my App.js file.

Sorry for the kind of vague title. The best way to explain my question might be an example.

I have a of items in redux, and the list is displayed in a react component using standard react-redux connected components. Each individual item has a button, which when clicked, does some asynchronous work, and then removes the item from the list and puts it in another list displayed somewhere else. It's important that the logic for starting the asynchronous work be handled in redux because it's important to the state of my application.

That basic functionality works, but now I want to add feedback to the button so that when the side effect succeeds, it changes the label to a Checkmark (for simplicity, i'll do nothing and leave the list unchanged if the request fails in this example). The item will stick around for an extra second with the checkmark before being removed from the list.

The problem is that if i remove the item from the list as soon as the async work is done, it is immediately unmounted, so I need to delay that. I've been trying to come up with a way to implement this logic that is reusable across my app, as I'll want the checkmark feedback in other unrelated parts of the app.

The simple solution is to dispatch an action on success that just changes the state to indicate that the item's request succeeded, and then do a setTimeout to dispatch another action 1 second later to actually remove the item from the list.

I feel like doing that logic will become very repetitive if i do it in different places across my app where I have a button. I'd like to be able to not have to repeat the timeout logic for every new button that needs this. But I want what my app displays to represent the current state of my app.

Has anyone dealt with an issue like this before?

Thanks

Edit: I don't think it should really change the general solution, but I'm using redux-loop to handle side effects. I feel like a generic solution will work fine with thunk or saga or whatever else though.

Code I'm working with:

// redux-reducer.js