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.
Related
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
So I had a design pattern question I guess for React SPA's (single page application). Right now, we're using redux state to track which "page" the user is on. Depending on that page, we're rendering different html/css using conditionals (switch/ifelse).
I feel like it's a waste to create new components for something that isn't changing that much and while the variance in html/css per component varies ... I'm wondering if theres a better or "right" way to do this?
edit: After speaking with a fellow engineer, I think it makes sense to just conditionally render separate components. Although the abstraction to me seems kind of overkill it will probably be more maintainable in the long run.
You can use react-router and react-router-redux.
https://github.com/ReactTraining/react-router
https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux
It can be connected with React and Redux. It offers an action creator (push) so you can dispatch router-like actions.
I have two basic questions (dont need anyone to write the code or something, just to see different directions).
When using react, react-router and redux what is the best approach to setup user authentication (using jwt)? I have researched a lot of articles and everyone uses different approach, so it becomes a bit confusing and everyone has different opinion saying other way is wrong etc...
What way and where is the best place to store user token and all informations related to that?
How to prevent user from accessing specific routes, what is best approach to do this and where exactly?
Imagine that app is ugins react, react-router for route setup and redux.
Check auth wrapper - nice solution for your problem.
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
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.