Took course on Udemy "Modern React and Redux" , Still not very clear about how data flows...
Please suggest How to Learn Reactjs and Redux,
What sources are best for basics?
How to start programming in reactjs?
In my opinion, the best source material concerning Redux and how to use it with React are these courses created by Dan Abramov (the creator of Redux).
https://egghead.io/courses/getting-started-with-redux
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
The first course explains you what Redux is about, how it is made and how to use it.
The second course is more pratical, it shows you how to use it in a real application using React.
I personnally have learned how to use React and Redux using these two courses only.
Related
I am trying to teach myself redux, I spent a bunch of time learning the outdated documentation. RIP. So now I am learning from https://react-redux.js.org/introduction/quick-start .
When configuring my store to start the tutorial, I came across middleware and enhancers. Can someone explain to me exactly what these do in simple terms and if/when they are necessary!
I appreciate any insight more than you guys know! Thankyou. Also, if you have a good tutorial to follow that would be appreciated as well! Short term I am trying to take a user input and send it for display on a separate page.
Those docs are for the React-Redux library, specifically, which is the UI bindings layer to let React components talk to the Redux store. "Middleware" and "enhancers" are a Redux core specific concept, so you won't find any info there.
To actually learn Redux, please read through the newly rewritten official tutorials in the Redux docs, which have been specifically designed to teach you how Redux works and show our recommended practices:
"Redux Essentials" tutorial: teaches "how to use Redux, the right way", by building a real-world app using Redux Toolkit
"Redux Fundamentals" tutorial: teaches "how Redux works, from the bottom up", by showing how to write Redux code by hand and why standard usage patterns exist, and how Redux Toolkit simplifies those patterns
For this question specifically, the "Store" page in the "Fundamentals" tutorial covers what "enhancers" and "middleware" are:
A store enhancer is like a special version of createStore that adds another layer wrapping around the original Redux store. An enhanced store can then change how the store behaves, by supplying its own versions of the store's dispatch, getState, and subscribe functions instead of the originals.
and:
Enhancers are powerful because they can override or replace any of the store's methods: dispatch, getState, and subscribe.
But, much of the time, we only need to customize how dispatch behaves. It would be nice if there was a way to add some customized behavior when dispatch runs.
Redux uses a special kind of addon called middleware to let us customize the dispatch function.
I just recently started learning React and 3 different friends told me that the best way is with Redux, Hooks and context respectively
I'm building a MERN webapp with 3 differents roles, authentication and grhaphics, so what do you recommend ?
Redux and Hooks work very well together, as described in the Redux official docs. This is also mentioned in the React official docs by the way.
For simple state, hooks alone is more than enough. For more complex applications, relying only on hooks without Redux (or some kind of global state) is incredibly difficult.
I would even go as far as to say that just hooks and context for a big application is also hard to maintain.
Here is a small project I am doing using Redux's useDispatch and useSelector hooks. I just started it so it's good to see the boilerplate code that needed to be added.
Personally, I feel that the new Redux hooks are much easier to work with than Redux without hooks.
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 would like to know if it is possible to create a React project containing Redux library and then export it in another project? Until now, I only create components that display data. So I never wonder if it is possible.
The goal is to develop a little chatbot that communicates with an API. Then, this project will be used in several React projects.
Is it possible to do this? If yes, is it a good practice?
I have searched on the web and on Stack Overflowbut I didn't find any answer.
Sorry if the question has already been asked.
Thanks.
It is possible. A React component is a JavaScript function or a class. It can contain any JavaScript code. So a companent that is exported to other projects can manage its state using Redux.
Redux makes sense when the state handling is complex. Your component seems simple since all it does send data to an API and show received data. If you think it is complicated and that it would be difficult to implement it using pure React alone, you can use Redux.
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