React cooperating with Redux
We have a series of articles about react and how it works with redux:
-Redux without React
-React cooperating with Redux
In the first article, we covered Redux and how it works without React.
in this article, we will explain how React cooperates with Redux.
Advantages of using redux:
As we know redux is a state management library, why we need state management?
In React, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by this parent component and passed as props to these sibling components.
If we want to share data between 2 sibling components this will be difficult because the state will have to be lifted up to the nearest parent component and to the next until it gets to an ancestor that is common to both components that need the state and then it is passed down, so there must be a common parent to those siblings to allow one of them to send data to the other.
That`s why we think of using redux with react to help share data between different components without need to pass state from parent component to child as props.
How React and Redux work with each other:
React works with Redux by using react-redux library
How React-Redux works?
The react-redux library provides 2 components: provider & connect components.
First we wrap the component which needs some data from the store with connect component which is connected to the provider, the provider takes the data from the store and give it to the connect component which in turn passes it to the component that needs data from store, by this way we pass data from store to a component which is not a direct child to the App component.
Provider:
The <Provider /> makes the Redux store available to any nested components that have been wrapped in the connect() function.
Since any React component in a React-Redux app can be connected, most applications will render a <Provider> at the top level, with the entire app’s component tree inside of it.
Connect:
The connect() function connects a React component to a Redux store.
It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
connect accepts four different parameters, all optional(we can put null instead of anyone we don `t want to use). By convention, they are called:
- mapStateToProps: any time the store is updated, mapStateToProps will be called. The results of mapStateToProps must be a plain object, which will be merged into the wrapped component’s props. If you don’t want to subscribe to store updates, pass null or undefined in place of mapStateToProps.
-mapStateToProps function takes 2 parameters (state,ownProps), if we put both parameters mapStateToProps will be called whenever the store state changes or when the wrapper component receives new props. - mapDispatchToProps: may either be an object, a function
-If this parameter is null, Your component will receive dispatch by default
-mapDispatchToProps takes 2 parameters (dispatch,ownProps)
will be called with dispatch as the first parameter and the props passed to the wrapper component as the second parameter and will be re-invoked whenever the connected component receives new props.
-mapDispatchToProps functions are expected to return an object. Each field of the object should be a function, calling which is expected to dispatch an action to the store.
-The return of your mapDispatchToProps functions is regarded as dispatchProps. It will be merged as props to your connected component. If you define mergeProps, it will be supplied as the second parameter to mergeProps. - mergeProps
4. options
To use React-Redux:
1)open project directory and run this command
npm install — save react-redux
Inside index.js file:
2)import provider from react-redux.
3)wrap the App component by the provider tag and pass the store as a prop to it.
Wiring up connect inside the component:
4)import connect from react-redux.
5)use the connect in the component and pass inside it the action creator or/and a mapStateToProps function which takes state (all data inside the store) as a parameter and turns the state to props which we can access anywhere inside our component.
Summary
- you can use react-redux library to combine React with Redux and deliver data to any component through connect
-react-redux makes sharing data between components easily through provider which takes data from the store and connect function that wraps the component that needs access to the store.
To read more on react redux https://react-redux.js.org/
