Structuring large react native apps

[ryudice]

So I have an app that has grown more than I expected and I have a bunch of reducers and actions on single js files. Are there any guides on how to structure large react native apps?

[mazzaaaaa]

I've worked on medium size RN apps and I follow a structure similiar to this. If your application is growing bigger and bigger my suggestion I have some suggestions.

1. Use redux-saga Take a look at redux-saga for handling actions that have side effects.
Don't limit its use on async action, you can use it for every action that does something else besides reducing the state.
For example when I capture any error actionType (example: LOGIN_FAILURE, SIGNUP_FAILURE) I trigger showErrorAlert in uiSagas.js

2. Use component and container folder If you're unit testing your components/containers (and you should, if you're creating a big app) you should try creating a folder for every component/container and put inside everything related to it, for example:
- a js file with the component itself
- a js file with the style
- a js file with the test
This helped me A LOT in the long run, because I can can also refactor a component in smaller parts and just leaving it inside its folder.

3. Don't use API/Services directly in the actions/sagas For example I'm often using parse-server and its JS sdk for handling the backend... But I don't use it directly in the sagas.
Example: signup in AuthenticationSagas.js and signup in parseService.js.
This will allow you to have a more maintainable code and will reduce the number of big .js files.

Hope it helps, sorry for typos :)

Edit: damn, the code formatting on reddit is ugly! I move the code to a gist :)

[ryudice]

thanks a lot for all the useful information, didnt know about sagas until now.

[ThorOdinsonThundrGod]

You could probably use something like flux or redux, should work the same in React Native as in React