I've been using Redux for months now and I realized that using Redux actually slows down my dev speed a lot (sorry that the title is provocative). I separated the backend and frontend completely into two repos. I use Rails on the backend and Redux on the frontend.
It feels very nice to be following the modern ES6 trend with React, Redux, and Babel. But these two things bother me:
You have to write a LOT of code just to get CRUD right. Getting the loading state right, making sure that the frontend and backend data are always in sync, etc. is more hassle than you might imagine.
You have to worry about SSR, which is not all that simple.
So I went ahead and re-wrote my app in Rails and React without using Redux. Basically, I just used React to draw presentational components, and Rails controllers replaced Redux's smart containers. Then, I could implement the same functionality twice as fast.
When should I actually use Redux? Am I doing something wrong?
The major benefit of Redux is the single source of truth for your application's data, paired with powerful features like middlewares (super useful for tracking things like telemetry.)
From a usage POV it's not much more complicated than any other Flux implementation, but you gain the benefit of access to all state all the time instead of cobbling together pubsub subscriptions to a bunch of stores.
I've been using it for about 8 months now and have few complaints.
When I started using React Native I didn't use redux, I was spending a lot of time sending data from one component to another, from one module to another and the code was getting ugly as my application started growing, until I integrated redux.
Redux allows you to share data across all your application with easy, allowing you to change the global state with a simple action call from your components.
I use Rails as well for the backend but only to save and get data. I have a JSON API that I use from the mobile app (React Native) and from a web app that I have in AngularJS.
Related
What is the basic difference between react and redux? is react and redux is same? why we should use redux? Finally why it's called react-redux?
I want to know this i just confused between this two.
You must be pretty new to web development. First of all, welcome !
React and redux are pretty different beasts, but have often been used together to make state management easier in React apps.
React is a front-end web framework, it allows you to create a wide range of web apps using JSX (React's way of fusing Javascript and HTML). This is a gross oversimplification, I encourage you to read the documentation.
Redux is a state management library. With it, you can define one or many stores, containing a state (basically an object that holds any data you need), actions (methods to alter or retrieve the current value of the store) and to subscribe the state's changes at a global level. Again, the Redux documentation should have most of the answers you're looking for.
React and redux are often used together, mainly through the use of the react-redux package, since Redux offers a global, reactive state, enabling you to share data between React components anywhere in your app without having to pass props.
Now tough, you could achieve similar functionnality without Redux entirely, using React's own Hook and Context APIs. Although the logic behind these is a bit more involved, it allows for far more flexibility.
With our team, we are going to start a medium project with Reactjs + Apollo + Graphql and we are looking architecture pattern to keep an order on this project.
I was reading and watching some videos about Architecture for Reactjs and the most commented was Redux, seem good it have state managment and a file structure for work (like layers) but work better with Api Rest and we want to use Graphql.
The other option is use only Graphql and Apollo, because Apollo have it's own state managment and similar options that can replace redux, but if we use this option, what architecture can we give it? mvp? or mvvm? Is it posible with Reactjs?.
If some one with experencie with Reactjs can advise us, we would appreciate it =)
I think you should first understands the benefit of using ReactJs within your project. By saying this I mean to say that React and Redux are independent of each other. These are two different libraries.
React offers it's own benefits such as virtual DOM manipulation, lightweight, used with styled components and many more.
On the other hand Redux is kind of state management library that is based on centralized state management pattern and can be integrated with any JS framework.
With React you get the flavor of creating SPA's or even you can provide the illusion of SPA having multiple pages inside your App.
With React you can use other JS libraries without any obstacles as it is very user friendly and compatible with almost all latest browsers and even to aid the support there are various other libraries too.
I am new to ReactJS and I'm working on the Front-End side of a project I have developed myself. The project is meant to be a site where users can logIn and post messages.
I have developed my back-end using Spring, Kotlin and MongoDB as DDBB, and have developed the API to perform all the necessary actions.
I have already developed the front-end side in Angular 6, since I know how to do that, and I have the site running correctly.
However, I'm trying to learn ReactJS, and I want to 'replicate' what I've done in Angular with React. After some tutorials and stuff, I have been able to develop my LoginComponent, which can fetch correctly the userInformation from the backend.
Here's then my question: In Angular, I use services to store variables that I may need from different routes, such as the userId (I will query the messages using that). I have not noticed how to do that in React, any idea?
Sorry for the poor explanation, I'm new to React.
You need a place to store the application state, you can use rxjs or mobx observables, or you can use redux. I personally like observables, as there is a lot of boilerplate in redux.
In react, your smart components will usually import pure functions from services that perform actions on the stores, and derive its rendering from the application state that is passed down to dumb rendering components.
Is Redux still relavant when using Apollo?
I have recently been diving into Apollo 2, and have seen a notable post stating that they have removed a lot of redux code in favor of Apollo.
https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a
I know that Apollo 1 used redux under the hood, but that has been deprecated in v2, and several sources have pointed to using apollo-link-state and Apollo Cache as a replacement.
The Apollo Dev tools are super useful but I find myself often wishing to use Redux Dev Tool to be able to see the application global state, use time-travelling and see all that actions called.
It may be that im still getting use to Apollo, but I wanted to know is there still an advantage to using Redux with Apollo?
Update
I have found someone who has build a simple application using Apollo 2, which clearly makes me think think that Redux is completely unnecessary in Apollo.
https://hptechblogs.com/central-state-management-in-apollo-using-apollo-link-state/
State management in a react application is a multi-dimensional issue. It involves coordinating/analyzing states of different components in your screen and managing asynchronous state + data flow (http, persistance, etc.). Apollo started out by only addressing the asynchronous state management. It abstracted away graphql http calls as internals of components. Redux started out on the other side by managing local synchronous state. Today though both solutions are able to provide a local and remote data state management implementation and could be considered interchangable.
The biggest difference between both solutions is the underlying state transition philosophy. Apollo requires less boiler plate by going against the idea of having pure state transitions. On the other hand, Redux follows more of a strict approach to ensuring stat transition occurs in a pure way. I personally like using Redux with GraphQl since Im a big fan of having my state being a result of a series of actions. It keeps things predicatable while still enabling GraphQl to be used by an async handling middleware like redux-saga or things of the sort.
TLDR: Apollo is simpler as it allows the library to do a lot of the async work but comes at the cost of not using Redux's awesome action command pattern.
I have found someone who has build a simple application using Apollo 2, which clearly makes me think think that Redux is completely unnecessary in Apollo.
https://hptechblogs.com/central-state-management-in-apollo-using-apollo-link-state/
Apollo GraphQL Client can also work with any REST endpoint https://www.apollographql.com/docs/link/links/rest.html. So you don't even need to change the backend...
I am trying to build an react app where i need to pass a JSON of size more than 4MB in between routes / components.
I tried passing as query params in route, the url changes to blank..How can this be done in react.
It's probably not a direct answer but if you are starting a new app I would recommend you to use Redux with react-redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
It's very small library so it's easy to understand how everything works. It might be a good solution to your problem.
Todo app example
You can also check out awesome egghead.io free tutorial - Getting Started with Redux
Here is the answer about the redux benefits by its author Dan Abramov