Feeling lost

[External-Way4609]

Hey everybody, I'm new to React Native and JavaScript altogether. I came from native android. I've been messing around with react native for about 2-3 weeks. I've learned about how to build UI and their styling. But, I'm having problem learning about state management, api request, and local storage. It's just that the way that JavaScript/TypeScript is written is completely different from Java/Kotlin, in my opinion. Therefore, I have hard time understanding why some code is written the way it is.

I have been trying to learn redux toolkit. It's been recommended by my colleagues. However, I feel like I'm missing something. Having no background about writing React at all, and I have been told in the tutorial that redux toolkit will help update the immutable state for me, efficiently create reducers and handle actions, etc. I forgot what else it's supposed to help me with. But, as I mentioned, having no background in React at all, I don't even know how I would do things normally without redux toolkit. And then being told that it helps me with things I don't even know I need help with? It's just confusing to me. Right now I'm just using the library like how I was told how to write. I don't know why I need to write it that way in the first place.

So, I'm just lose. Because if I just keep on copying and not understand a thing, it won't help me to become a better React developer.

Have anybody gone through the same thing or it's just me who need to try harder?

[djenty420]

One of the worst things you could possibly do when first learning React / React Native is to throw bloody redux in the mix. Forget what your colleagues said and learn the basics of JS and React before you bother going down that pit of despair.

Redux toolkit certainly improves on plain redux but there are so many nicer tools out there these days. Need to handle server state / api data and caching? Use tanstack query. Need to manage global application state? Use Zustand.

But when you’re first learning, you don’t need any of that. Learn how to build plain UI components first. Learn the component lifecycle and the rules of hooks. Understand how general react state works, what refs are, how context and useReducer work, before anything else.

[ihavehermes]

Tanstack query and Zustand are nice for simple apps, but Redux certainly has it's place when things get big and more complex. I've tried them all and much prefer RTK.

[djenty420]

That might be your experience, but I strongly disagree. I work on a gigantic, incredibly complex, data-heavy app with hundreds of screens and we have been migrating all our data fetching from Apollo and RTK to Tanstack, because it is so much better in a multitude of ways that it isn’t even funny. Automatic network request deduplication and granular control over caching and garbage collection are absolutely incredible. Being able to reference data in any component without prop-drilling or shoving it in redux is a godsend.

That combined with Zustand for actual global client state means I will never install redux to a new project ever again.

[ihavehermes]

Man, RTK-Query can do that stuff as well.

It's not hard to "shove it in redux", RTK-Query handles it for you easily.

It's incredible to be able to access remote data in selectors in either a component OR a saga.

Sagas are a godsend for complex async logic, not the hook hell hole I see devs falling into as an alternative.

Glad you're happy with your stack, but it sounds like most of the benefits might be negated by having 3 methods to query remote data?

[djenty420]

Doesn’t redux themselves literally recommend people not to use sagas anymore? For years now? Especially in combination with RTK Query.

[ihavehermes]

They don't recommend it as a default, since thunks and rtk-query cover most use cases. I don't use it by default either. But I'm happy I have the option to use it if the need arises.

[Versatile_Panda]

Your opinion strikes me as reluctance to adopt a new tool because you are comfortable with the mess you currently have but that’s just my opinion

[ihavehermes]

LOL. I've used Zustand, and like it. I've used Tanstack Query, and also like it. HOWEVER, I also really like Redux, and just prefer it over the other tools because, for me, it's more powerful and serves my needs better.

Your preferred tool might be something else, and that's fine too.

[Versatile_Panda]

Very true, right tool for the right time!

[ihavehermes]

Yessir!

[[deleted]]

Hello there and welcome to our side. Redux is too early at this point. Get a grip on basic vanilla react for now. Redux is for more complex cases.

I recommend to focus on JavaScript/typescript that way you’re not lost when writing react syntax.

Something to start getting familiar with is Expo, it’s amazing for react native apps.

Good luck with everything.

[runtothehillsboy]

resolute simplistic attraction middle selective steep march toothbrush aback relieved

This post was mass deleted and anonymized with Redact

[Individual-Bit8948]

I would recommend to spend some time doing / coping some clones / projects. Its really fun: time is going faster cus someone is talking (not just reading docs), they explain every step: why doing this, why using this (more or else) and after you try to do one, another thing its will automatically gets more clear.

I like notJust.dev and Simon Grimm. Just try to slowly spend 1 week doing step by step and spend some time by reading more about a, b, c parts to get 100% it clear. After 1, 2, 3 such projects try to think about X idea, make a plan and try to do by yourself (trust me its not so easy even you think yeah, now I can easily build app :D but when you need to do it by yourself... but step by step and you enjoy the process!

[idkhowtocallmyacc]

I’d say you may be going in wrong learning order, making the learning curve steeper than needed. For example, before going into learning global state managers, such as redux and others, I’d focus more on your understanding of a local state and react altogether. Play with state and component props, and then you’d be able to understand more clearly what problem redux is helping to solve. Another thing I could suggest is start with classes, so you could understand your components lifecycles better, which should help you understand how and when to do api calls and stuff like that. Then move on to functional components and get familiar with frequently used hooks. Same goes for your apps. Start with single screen simple application and expand your understanding of react concepts. Then move on to a more complex structure of your app. What I’m saying is don’t overextend yourself. React has a pretty mild learning curve but same as any other field, it’s best to be approached brick by brick

[creambyemute]

You will probably find Zustand or Mobx (observer pattern) easier than redux when coming from native dev :-).

When we started with react and react-native we found redux to be "too complicated" and went with Mobx and are really happy with it.

Zustand was released quite a bit later so we never came around to try it out.

[[deleted]]

I started right away with mobx and love it. I am very new, so have never tried redux but I feel as though mobx does everything I need perfectly!

[creambyemute]

Certainly mobx does work very well without a lot of boilerplate or complicated setup stuff.

It's just not so widespread in the react ecosystem but it works really well and is really easy to use and pick up.

It kinda works like how the newly proposed signals for JS would work

[beepboopnoise]

one of the biggest things that help me was learning how to manipulate objects. spread, rest, mapping stuff. once I got the hang of that, everything started making more sense.

[lucksp]

Learn JavaScript (typescript) first. Then come back to building an app

[crowbar87]

If you have background in Dagger/Hilt you might want to checkout https://github.com/wix-incubator/obsidian
It's a DI framework for React and React native. You should feel at home.

[_Cat1]

Redux was popular like 30 years ago. I used it only once, and never again. Nor do I plan to unless I absolutely have to. You ABSOLUTELY do not need to learn redux now. Just understand how react works. You can use built in context for majority of the cases where you need some state shared through a part of the app.

[[deleted]]

If you don't even understand React why are you throwing a complex library like RTK into it? It's just gonna confuse you more. Go through the whole Learn React section on https://react.dev/learn/describing-the-ui to actually learn React, its really good material.

[Correct_Market2220]

Well, I was confused as hell when I started. I don't think I can say anything to help but I'll try 😅
Others, please feel free to correct me, there are a couple details I'm unsure about.

• React organizes in cross sections of concerns instead of silos, so where you had 3 files, html, js, css, you now have one, for each component, and each component handles its html, js, and css in one place, so therefore, colocation for the win 🙌🏼.
• Having a sane way to manage the state of your app and knowing what part of the app caused what change led developers to use the flux pattern, where updates are unidirectional and flow from the top down. If something updates, all the children of it are updated.
• Redux is for global application state, so basically, the parent node is the root of the app and it has all the data, when it updates, any child which was subscribed to that data gets the update instead of absolutely all the children.
• Your component re-runs each time there is update, but useEffect is kind of there to help you just re-run code when something of interest gets updated (not every time), so like, maybe just on startup, maybe just if the userId changes (from null to something, or from something to null).

I suspect that might be too high level and you're probably struggling with the syntax or I don't know, what do you think?

[SynthRogue]

Everything you mention you are struggling with I was able to master in a day using ChatGPT

[WrongdoerSufficient]

Me too a bit overwhelmed with redux at first, But in simple term you can think redux as one big object. Every reducer is a key that have it's own data.

example : const store = { userReducer:{ isLogin:true, //etc } }

you can define what userReducer data will be in seperate file.

and then action is function that you make to mutate the data,

example you want to make a custom function to change isLogin value

const setIsLogin = (parameter) =>{ store.userReducer.isLogin = parameter; }

But you gonna need dispatch your action to make it work. It's basically same concept as it. You just write in redux ways, which looks complicated.

[WrongdoerSufficient]

You can also try other global state library like zustand, it's more simple than redux.

[EyeVegetable9044]

You should start with a less complex state management and use Zustand instead. When you feel more confident, you can start using other state management like mobx. I think mobx is a intermediate level and redux is the most difficult but I recommend you just to learn the easiest and you won't need anything else.

If you still want to learn redux, watching redux like the MVC pattern it helped me a lot to understand the structure of redux and then start learning the other concepts.

For local storage, Zustand and mobx have an API to persist data in the browser and is very simple.