Tuesday, December 31, 2019

React Redux


- Redux is mainly for managing the application states
- When the application starts up, app need to provide a Redux Store.
- Redux store is nothing but a bunch of reducers. In the sample we same placeReducer was the only reducer,
- Below is mapping the props to state so what when places array is changed, the render function will be executed.

const mapStateToProps = state => {
  return {
    places: state.places.places
  }
}

- Below code is helps to connect the application to the required action, so that action then further executed by a reducer and change the application state.

const mapDispatchToProps = dispatch => {
  return {
    add: (name) => {
      dispatch(addPlace(name))
    }
  }
}

- When using react redux, the general pattern is, create a reducer, a store with the reducer, and connect the store to the app. This is achieved by the below
export default connect(mapStateToProps, mapDispatchToProps)(App)

From the above, connect(mapStateToProps, mapDispatchToProps) this method returns a component technically and this returned component and the App get exported,
So, if we have only below line, it will not have the connection and hence the reducers will not be executed

export default (App)

No comments:

Post a Comment