Quick Tech Bits - React-Redux integration

To integrate react and redux, the installation of the library "react-redux" is required. The redux library should also be installed

 C:\Your_Project_Directory\>npm install redux react-redux 

** The github link for a simple sample application on this integration is available at this link

 Summarizing integration between and redux

1. import {connect} from 'react-redux' 

   This import should be done inside the react component that wishes to use the Redux Store

2. Write 2 functions in the above react component

i. mapStateToProps(): It will map the redux store to props of the react component

      Here, redux will allow the creation of props dynamically through code

ii. mapDispatchToProps(): Will take a function called dispatch as its parameter. This function will dispatch (invoke) the action that will invoke the reducer that will change the redux state. The changed redux state will be assigned to the object key (addUser)

that will be returned as a prop to the react component.

3. Call connect(). Connect(mapStateToProps, mapDispatchToProps)(YourReactComponent)

   This function will connect react & redux.

4. In react application, assuming that App.js is the container component, we add the Provider tag

   to integrate everything to a specific store of redux.

Inside App.js  

 <Provider store={yourReduxStoreObject}>

   <YourReactComponent/>

</Provider>