CODEWITHSUNDEEP
reduxredux-observable
sonicmario
sonicmario

Reputation: 611

How to dispatch my variable with redux?

I'm new to redux. I realized that I need dispatch to save variables in our store. However, I can't dispatch device_token. I tried "store.dispatch".

and It's react-native code. However, I think it is an only redux problem. I need help.

my code is below.

// @flow
import { Component } from 'react';
import { Platform } from 'react-native';
import FCM, { FCMEvent, RemoteNotificationResult, 
WillPresentNotificationResult, NotificationType } from 'react-native-fcm';
import { connect } from 'react-redux';
import { getDeviceToken } from '../common/CurrentUser/actions';

const showLocalNotification = (notif) => {
  FCM.presentLocalNotification({
    title: notif.title,
    body: notif.body,
    priority: 'high',
    click_action: notif.click_action,
    show_in_foreground: true,
    local: true,
  });
};

export class PushNotification extends Component {
  constructor(){
    super();
  }

componentDidMount() {
  FCM.requestPermissions().then( () => {
    FCM.getFCMToken().then((token: string) => {
      const device_token = token;
      const { saveDeviceToken } = this.props;
      alert(device_token);
      dispatch(saveDeviceToken(device_token))
      //dispatch(getDeviceToken( { device_token }));
      alert(token);
    });
  });

  FCM.on(FCMEvent.RefreshToken, token => {
    alert(token);
  });


  this.notificationListner = FCM.on(FCMEvent.Notification, (notif: Object) => {
  if (notif.local_notification) {
    return;
  }
  if (notif.opened_from_tray) {
    return;
  }

  if (Platform.OS === 'ios') {
    switch (notif._notificationType) {
      case NotificationType.Remote:
        notif.finish(RemoteNotificationResult.NewData);
        break;
      case NotificationType.NotificationResponse:
        notif.finish();
        break;
      case NotificationType.WillPresent:
        notif.finish(WillPresentNotificationResult.All);
        break;
      default:
        break;
      }
    }
      showLocalNotification(notif);
    });
  }

  componentWillUnmount() {
    this.notificationListner.remove();
    this.refreshTokenListener.remove();
  }

  render() {
    return null;
  }
}

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    saveDeviceToken: (token) => dispatch(getDeviceToken(token)),
  };
};

export default connect(mapDispatchToProps)(PushNotification);

// action.types.js

// @flow
import type { Action } from './actionTypes';
import type { User } from '../../entities';

export const SUCCESS_LOGIN = 'SUCCESS_LOGIN';
export const GET_DEVICE_TOKEN = 'GET_DEVICE_TOKEN';

export const successLogin = (payload: { user: User, authToken: string }): Action =>
  ({ type: 'SUCCESS_LOGIN', payload });

export const getDeviceToken = (payload: { device_token: string }): Action =>
  ({ type: 'GET_DEVICE_TOKEN', payload });

// reducer.js

export default (state: State = INITIAL_STATE, action: Action): State => {
  switch (action.type) {
  case 'GET_DEVICE_TOKEN':
    return {
      state,
    };
  default:
    return state;
  }
};

Do you have any Idea? I can't dispatch my device_token. thanks.

Upvotes: 2

Views: 2867

Answers (1)

Michael Peyper
Michael Peyper

Reputation: 6944

The first parameter of connect is mapStateToProps. If you don't need to map any state to props, you can just change it to:

export default connect(null, mapDispatchToProps)(PushNotification);

This will bypass that parameter and allow mapDispatchToProps to be passed as the second parameter.

Then you can just call it off props like a function

componentDidMount() {
  FCM.requestPermissions().then( () => {
   FCM.getFCMToken().then((token: string) => {
      const device_token = token;
      const { saveDeviceToken } = this.props;
      saveDeviceToken(device_token);
    });
  });
}

Please see the API docs for more details.

I think you are also not passing the device_token to the getDeviceToken action creator correctly. Try changing mapDispatchToProps to look like

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    saveDeviceToken: (token) => dispatch(getDeviceToken({ device_token: token })),
  };
};

Upvotes: 2

Related Questions