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
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.
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 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've just setup my Redux store in React native app.
I moved to initialize React navigation for my project, i though that, as long as i'm using Redux to manage my app state, then the default option is that redux also is taking care of Navigation, and it should be hooked up to Redux, i opened React navigation docs, it says literally:
"Think twice before you consider doing this, there is an incredibly good chance that you do not need to do t his!"
So, is it a good practice to manage navigation with Redux, or just implement basic navigation the normal way (outside Redux) ?
Thanks in advance.
React Navigation manages its own state internally (using its own redux store I think...). There's no real need to connect react-navigation state to your own app's redux store since they expose API to do everything you might need to even without the navigation prop. Also it looks like they're dropping support for redux integration in the next version so beware of deprecation.
This is one of those cases where people may introduce unnecessary complexity and research into the project just to be happy about how "neat" the code runs even when it doesn't offer any real deliverable.
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.