https://github.com/nazemmahmud/redux-example

https://github.com/nazemmahmud/redux-example

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/nazemmahmud/redux-example
• Owner: NazemMahmud
• Created: 2022-03-07T00:31:25.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-10T20:49:41.000Z (almost 3 years ago)
• Last Synced: 2023-03-06T04:47:21.173Z (almost 2 years ago)
• Language: JavaScript
• Size: 700 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Run project

To check how to run and build or test the project, follow **project-build.md** file.

## How `connect()` from react-redux works

```bash

function connect() {

  return function () {

      return 'Hi to react-redux';

  }

}

connect()(); # it prints Hi to react-redux

```

*Here a function is returning a function*

So, when we write connect()(ComponentName), it passes the component inside the inner function, and works as a wrapper.

## ``mapStateToProps`` 

### To connect the `connect()` with `Provider` to get states

- it is a conventional name, it can be customized. We may call it `getMyStates`

- Whenever a state is updated, it re-runs and updates the state in a component

```bash

/**

* @param state => Get all states in the argument

*/

function mapStateToProps(state) {

  return { propName: state.stateName  }; // propName is a user-defined name for prop element

}

connect(mapStateToProps)(ComponentName);

```

**For more:** [mapstatetoprops link](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops--object)

## ``mapDispatchToProps ``

### Get action call from props, then dispatch that using action creators to update states

- it is also a conventional name, it can be customized.

```bash

/**

* @key selectSong => this is props coming from any call action from component

*/

const mapDispatchToProps = (dispatch, ownProps) => ({

  selectSong: () => dispatch(selectSong(ownProps.title)),

});

```

**Simplest form is**

```

const mapDispatchToProps = {

  selectSong

};

connect(mapStateToProps, mapDispatchToProps )(ComponentName);

```

**For more:** [mapDispatchToProps link](https://react-redux.js.org/api/connect#mapdispatchtoprops-object--dispatch-ownprops--object)