Watermelondb: How to integrate React Redux and WatermelonDb?

[roots-ai]

Hello!
I am new to Watermelondb and landed up using this due to slow performance of AsyncStorage.

I am looking to serve APIs with react native redux using dispatch, and then push data from props into WatermelonDb.

1. Is this the right approach? Or am I going architecturally wrong?
2. If this is not wrong then is below the right way to connect a Database with Redux?

import DatabaseProvider  from '@nozbe/watermelondb/DatabaseProvider';

<DatabaseProvider database={database}>
   <Provider store={store}>
    <RouterWithRedux scenes={AppRoutes} style={AppStyles.appContainer} />
   </Provider>
</DatabaseProvider>

and then inside a component do "something" around these lines...Please help me correct.

const mapDispatchToProps = {
    getAllCities: CityActions.getAllCities,
};

const mapStateToProps = state => {
    return {
        allCities: state.city.allCities,
    }
};

const observeCities = withObservables(
    ['cities'],
        (props) => ({
        cities: props.database.collections.get('cities').query().observe(),
        ...props
    })
);

export default connect(mapStateToProps, mapDispatchToProps)(withDatabase(observeCities(Cities)));

[rkrajewski]

Hi @roots-ai! I suggest you to read main description of 🍉carefully https://github.com/Nozbe/WatermelonDB#why-watermelon and watch attached video https://www.youtube.com/watch?v=UlZ1QnFF4Cw

Is this the right approach? Or am I going architecturally wrong?

Basic idea of 🍉 , is to work instead of Redux. In short, it is lazy loaded and observable data layer, over local database (for example SQLite).

[roots-ai]

Thanks, @rkrajewski ! Yes I read that. Will also listen to the video.

But how data would be fetched from the APIs for the first time and would be mapped to the database?

[rkrajewski]

@roots-ai Here is doc about synchronization https://github.com/Nozbe/WatermelonDB/blob/master/docs/Advanced/Sync.md and the issue with discussion about it https://github.com/Nozbe/WatermelonDB/issues/5. After confronting with that, if you will have any further questions, please write it up in that issue or open new one for specific question.

I'm closing this one, since main question is resolved, as I think. Don't hesitate to reopen it if it's not.

[roots-ai]

Thanks. Works.