0

I am in the process of migrating an app from React to React Native and am running into an issue with Redux not dispatching the action to Reducer.

My root component looks like this:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux';


import Main from '../main/main';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';



class App extends Component {
    render() {
        console.log('Rendering root.js component');
        console.log(this.props);
        const { dispatch, isAuthenticated, errorMessage, game, communication } = this.props


        return (
            <View style={styles.appBody}>
                <Main 
                    dispatch={dispatch}
                    game={game}
                    communication={communication}
                />
            </View>
        )
    }
}

App.propTypes = {
    dispatch: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string,
}

function mapStateToProps(state) {

    const { auth } = state
    const { game } = state
    const { communication } = state
    const { isAuthenticated, errorMessage } = auth

    return {
        isAuthenticated,
        errorMessage,
        game,
        communication
    }
}

const styles = StyleSheet.create({
  appBody: {
  }
});

export default connect(mapStateToProps)(App)

Then a 'lobby' subcomponent has the dispatch function from Redux as a prop passed to it. This component connects to a seperate javascript file, and passes the props to it so that that seperate file has access to the dispatch function:

componentWillMount() {
    coreClient.init(this);
}

In that file I do this:

const init = function(view) {
    socket.on('connectToLobby', (data) => {
        console.log('Lobby connected!');
        console.log(data);

        console.log(view.props) // shows the dispatch function just fine.
        view.props.dispatch(connectLobbyAction(data));
    });
}

The action itself also shows a console log I put there, just that it never dispatches.

export const LOBBY_CONNECT_SUCCESS = 'LOBBY_CONNECT_SUCCESS';

export function connectLobbyAction(data) {
    console.log('Action on connected to lobby!')
    return {
        type: LOBBY_CONNECT_SUCCESS,
        payload: data
    }
}

I feel a bit lost, would appreciate some feedback :)

EDIT: Reducer snippet:

var Symbol = require('es6-symbol');

import {
 LOBBY_CONNECT_SUCCESS
} from './../actions/actions'

function game(state = {
  //the state, cut to keep things clear.
}, action) {
switch (action.type) {
case LOBBY_CONNECT_SUCCESS:
    console.log('reducer connect lobby')
    return Object.assign({}, state, {
        ...state,
        user : {
            ...state.user,
            id : action.payload.id,
            connected : action.payload.connected
        },
        match : {
            ...state.match,
            queuePosition : action.payload.position,
            players : action.payload.playerList,
            room : 'lobby'
        },
        isFetching: false,
    })
    default:
        return state
     }
    }
   const app = combineReducers({
    game,
    //etc.
   })
Dean Vaessen
  • 59
  • 1
  • 7
  • Where did you bind `dispatch` to props? connect(mapDispatchToProps, mapStateToProps) ? – Srinivas Damam May 18 '17 at 08:43
  • I am not adding it throughmapDispatchToProps, but it is passed automatically from the root component though (I can see the dispatch function in props through a console.log). As far as I can tell, adding a mapDispatchToProps is only for shorthand usage? http://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops – Dean Vaessen May 18 '17 at 09:31
  • can you add reducer file? if console.log in your action function is triggered, that means the error is either in the way you pass types to reducer or in the reducer itself. So can you add this missing bit(action types file, or where and how you declare it, and your reducer file)? – Mindaugas May 18 '17 at 12:18
  • I have added the portion of the reducer related to this action (and the action type). Though I don't think this is the error, as the reducer file is exactly the same as the original React version of the app, save for an import of: ``var Symbol = require('es6-symbol');`` – Dean Vaessen May 18 '17 at 12:45

0 Answers0