1

I want to migrate my project from plain react to react redux, I am not new to React but new to Redux. I have a fairly big web app written in React, dozens of React.js files. most of them containing state's + passing variables between them. including allot of Post/Get requests functions, implemented into at least half of my files.

I want to slowly move from plain react to react redux.

I wanted to ask if anyone have some article or can give an insight about migrating existing react project to react-redux. I dont want to stop development for the sole purpose of the change but instead to slowly adapt to it.

is it possible ? is there a tool to help me do it ?

I saw some redux examples where entire render of app.js was surrounded by <Provider> </Provider>, does that mean every component inside <Provider> bracelet can not have it's own state ? can I simply keep my old components as they are and put new ones into <Provider> </Provider> ?

Thanks in advance!

2
  • 1
    If your question got answered, please pick the right answer, it will help others too. Aug 1, 2019 at 13:38
  • I followed instructions in: youtube.com/watch?v=93p3LxR9xfM&t=1816s this video and managed to add it to the project. I surround entire project in provider and when I have a shared component I move it to store. I do it gradually and only for what is needed. Aug 5, 2019 at 5:02

1 Answer 1

2

I saw some redux examples where entire render of app.js was surrounded by , does that mean every component inside bracelet can not have it's own state ?

The way react-redux works is by exposing a store prop, provided by the Provider. In order to consume it, or extract data from it you must wrap your component by it (not directly necessarily, but one of the parents must be a provider). In general in most apps you would simply wrap the entire application with a Provider, because for the most part, if you've chosen to introduce redux into your application, it is probably because your entire app needs some store.
Using redux does not mean that components can't have state. There is a big difference between global state - something that should be accessible to every component in your app (if the component chooses to "consume" it), and state that is private to a component - e.g. form changes before being sent to the server.

can I simply keep my old components as they are and put new ones into ?

Well, yes. But also - no. As I said earlier, you should probably start from the top and slowly drill down. Wrap your app with a Provider, and start moving your application state from the top-most component to the store. Once you get more comfortable with redux in general, you should start replacing the props you pass down the component tree with props from the state by connecting your inner components.

This way you can do it one component at a time without breaking existing logic.

2
  • thanks for the explanation :), is there something stopping me from surrounding my entire application in <provider> and slowly move shared states to be global states in the store ? Jun 23, 2019 at 6:59
  • It really depends on the specific way you designed your application, but there shouldn't be any obstacles going this way.
    – Dor Shinar
    Jun 23, 2019 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.