Search code examples
reduxtypesreact-reduxselectorstore

What is a difference between mapStateToProps,mapDispatchToProps types and selector in reactnative


I am new to react native with redux. I am trying to figure out how all the pieces in react-native redux integration. The one thing giving me trouble is understanding the difference types and selector give me more details.


Solution

  • MapStateToProps -> has his name say, you can map state objects to props. Example:

    You have a store like this:

    {
      name:'paul',
      surname:'watson'
    }
    

    Then you need show in your component the name, so in your container you can access to this data stored in store with mapstatetoprops, like this:

    const mapStateToProps = (state, ownProps) => ({
      myname: state.name,
    })
    

    MapDispatchToProps -> thats when you need dispatch an action, you map an action to a prop to you can use in your component

    You have an action like:

    const setMyName = payload => ({
      type: SET_MY_NAME,
      payload,
    })
    

    then you need update your name in store when user click something throw this action, so you can map this action in a prop to call like updateName('pepito') with mapDispatchToProps, like this:

    const mapDispatchToProps = {
      updateName: setMyName,
    }
    

    Selectors -> it's just an abstraction code, selectors make your life more easy.

    Selectors are functions that take Redux state as an argument and return some data to pass to the component, like this:

    const getDataType = state => state.editor.dataType;
    

    Thats a basic concepts, you should read oficial document and search, in internet have a lot of articles about this.