This content originally appeared on DEV Community and was authored by Kemystra
The Feyn- oops, too lazy today lol
react-redux Package
We can finally use Redux with React after this long journey (of a few days 🤣), using the react-redux package. This package includes several tools to improve the integration of Redux in React.
Why?
React's state is a mess when things get complex (remember that even if one state updates, we have to write a boilerplate for ALL the other state). Redux is library that can manage state. You see where this is going?
Initiate the integration 🚀!
First, we have to create a Provider:
const Provider = ReactRedux.Provider;
Provider is a Redux wrapper for React that basically says: "I'm in charge of everything under here.". Simply wrap them around your whole React app and you're set!
let store = Redux.createStore(reducer);
// In a render() method...
<Provider store={store}>
<App />
</Provider>
This state only!
We can restrict component's access to certain state only with the mapStateToProps() function:
const mapStateToProps = state => ({
light: state.brightness
});
We can then access brigtness inside state.
Afterwords
Today's blog is short cause most of the time I tried to revise what I have learned about React, and they really put it to the test. Hopefully after getting my hands messy on them, the knowledge stuck.
Anyway, good luck to others who are completing this challenge!
Follow me on Github!
Also on Twitter!
This content originally appeared on DEV Community and was authored by Kemystra
Kemystra | Sciencx (2022-04-17T13:39:31+00:00) Day 12: React & Redux. Retrieved from https://www.scien.cx/2022/04/17/day-12-react-redux/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.