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
Related
I'm fairly new to Redux Saga, and I'm looking around for any repositories which have been written recently using React and Redux Saga to get a good idea of how an app should look/work. Most of the articles / videos etc appear to be quite old and still using Classes in React. I've done the obvious and looked on the Redux Saga site, however want a fully fledged app as an example.
Does anyone have a link to a repo with a good example of using Redux Saga, with tests etc that is recent?
https://github.com/shinima/battle-city, This is a Nintendo FC's battle city remake in JS by a Chinese developer Shinima, he is also one of the redux-saga's core contributor. All the game logic is heavily leveraging Redux-Saga. The Readme and the source code comment is in Chinese, try to use Google translate if you need to understand some of the code comment. The core business logic in the sagas folder is pretty straightforward to follow though.
I am trying to create a blog application and I am a bit confused on the data flow patterns of React.
Should I be trying to use something like Redux to store all of my posts after fetching the posts? Do I use local storage?
How do I then tell a component to render the 'expanded' version of the post? Is it better to re-use a 'post' component or should I just create two seperate components, one for the title and one for the full post?
I know it's two questions in one, but they kind of go together. Thanks in advance
Here's what I've found out about these topics after 6 months into my self-taught React journey.
In my opinion, React built-in features are more than enough to handle state for a small to medium applications (especially if you're working alone as a single developer).
If you turn to Redux right away, you'll have to learn this whole new pattern of handling state in a single immutable store and how to connect your components to it.
Since you will be most likely fetching data asynchronously, you'll need a helper library to work async on Redux: redux-thunk or redux-saga.
So right from the start, you'll have to add:
redux
react-redux
redux-thunk OR redux-saga
That is a lot of documentation to digest. It's perfectly doable, but I couldn't agree more with this quote:
don't solve problems that you don't have
It will be hard to learn those tools, since you've never faced the problems that they solve. Problems that you don't encounter just yet when you're starting to learn React.
Read this (from Redux creator):
https://medium.com/#dan_abramov/you-might-not-need-redux-be46360cf367
So, my recommendation to you:
Learn basic React (with classes):
https://reactjs.org/docs/getting-started.html
Then learn React Hooks (and you can basically forget about class components):
https://reactjs.org/docs/hooks-intro.html
Build your project using only React at first. And see how it goes. Then you can read more about Redux and what it does, and will be able to make a better choice on if you really need it or not.
From what you've told us about your project:
Keep a state for all your posts in a component high in the tree. Maybe inside the <App/> component itself.
Build your functions to fetch and update post data and update the state with the response.
Render how many components as you wish. Displaying full info about the post inside a BlogPostComponent or simplified version inside a BlogPostThumbnailCard with just the thumbnail and the title, for example.
If you want to be ready for the next versions of React and have a shorter code, you should try the hooks and avoid Classes
https://reactjs.org/docs/hooks-intro.html
You can organize your code as you want, but this is more interesting to have scalability with your components and reuse them with different properties
I don't particularly like the complexity that redux adds to a react app, so I try to avoid it as much as I can. I always struggle to know if I need redux or not anyway.
I am building a single web app with react, which consist of a map (Mapbox). I have arrived to the point where I struggle to pass data from/to non-related components while keeping my code clean.
So, I am wondering, is this a sign for redux to come into the game? Knowning that I am not a react master, and that there might be other solutions, such as context.
What do you think? Do you use redux for your Mapbox app? If yes, for which purpose?
Yeah I would, React Redux is not particularly difficult to set up. You will find it very useful if youre mapbox app requires user authentication.
mapbox has an open source redux wrapper here if its useful https://github.com/mapbox/mapbox-gl-redux
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.
I implemented dynamic routing following react-router huge apps example. now i want to use redux for easy state management but have no idea how to go from here.
the file directories are all nested with different routes and the code is separated to 7 chunks. is there any example or guide on how to migrate to redux from huge apps example that react-router gives?
Thanks.
You are looking for Redux-simple-Router. The idea is to store your router state in the redux store.
react-router does a great job of mapping the current URL to a component tree, and continually does so with any URL changes. This is very useful, but we really want to store this state in redux as well.
There is another package Redux-router. Which is also worth a look, but redux-simple-router does the job easily.
redux-router is another project which solves the same problem. However, it's far more complex. Take a quick look at the code for this library—it's extremely minimal. redux-router is much bigger and more complex.