React-native-router-flux: Version for Redux integration ??

[sarovin]

Which version has Redux integration 3.22.4 or 3.22.5?

I have this error:

Unhandled JS Exception: (0 , _redux.connect) is not a function

import React, { Component }                               from 'react-native'
import { createStore, applyMiddleware, combineReducers, connect }  from 'redux'
import { Actions, Router, Reducer }                       from 'react-native-router-flux'
import { middleware as netInfo }                          from './Middleware/redux-middleware-react-native-netinfo'
import { Provider }                                       from 'react-redux'
import thunk                                              from 'redux-thunk'
import createLogger                                       from 'redux-logger'
import { getAuth }                                        from './Lib/auth'

import * as reducers                                      from './reducers'
import { checkConnection }                                from './actions/NetworkActions'
import Routes                                             from './routes';

const RouterWithRedux = connect()(Router)
const logger = createLogger()
const createStoreWithMiddleware = applyMiddleware(thunk, logger, netInfo)(createStore)
const reducer = combineReducers(reducers)
const store = createStoreWithMiddleware(reducer)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Routes />
        </RouterWithRedux>
      </Provider>
    );
  }
}

[aksonov]

Please check 3.22.5

[aksonov]

You should insert scenes instead of Routes, check updated readme

[sarovin]

I just do not understand what is wrong with it, i post a questions on stackoverflow...

import React, { Component }                   from 'react-native'
import {
  createStore,
  applyMiddleware,
  combineReducers,
  connect }                                   from 'redux'
import {
  Router,
  Reducer,
  Actions,
  Scene,
  Switch,
  Modal
}                                             from 'react-native-router-flux'
import { middleware as netInfo }              from './Middleware/redux-middleware-react-native-netinfo'
import { Provider }                           from 'react-redux'
import thunk                                  from 'redux-thunk'
import createLogger                           from 'redux-logger'
import { getAuth }                            from './Lib/auth'

import * as reducers                          from './reducers'
import { checkConnection }                    from './actions/NetworkActions'

import SignIn                 from './Containers/SignIn'
import SignUp                 from './Containers/SignUp'
import Search                 from './Containers/Search'
import OTPScreen              from './Containers/OTPScreen'
import FDrawer                from './Components/FDrawer'

const selectorCheck = (user) => {

  if ( user && ( user.auth_token || user.isGuest ) ) {
    return 'drawer'
  }
  return 'auth'
}

const logger = createLogger()
const createStoreWithMiddleware = applyMiddleware(thunk, logger, netInfo)(createStore)
const reducer = combineReducers(reducers)
const store = createStoreWithMiddleware(reducer)

const RouterWithRedux = connect()(Router)

//Carica l'Auth da Realm allo Store
getAuth( store )
//Controlla lo stato della connessione all'avvio
store.dispatch(checkConnection())

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key="modal" component={Modal}>
            <Scene key="root"
              hideNavBar={true}
              component={connect(state=>({user:state.user}))(Switch)}
              selector={ ({ user }) => selectorCheck(user) }
              tabs={true}
              >
              <Scene key="auth"
                titleStyle={{ fontSize: 20, fontFamily: 'Avenir-Roman', color: 'white' }}
                navigationBarStyle={{ backgroundColor: '#1db198', height: 80, borderBottomWidth: 0 }}
                >
                <Scene key="signin" component={SignIn} title="Accedi all'App" type="replace" direction="vertical" initial={true} />
                <Scene key="signup" component={SignUp} title="Crea il tuo account" direction="vertical" />
                <Scene key="otpScreen" component={OTPScreen} title="Verifica di sicurezza" direction="vertical" />
              </Scene>
              <Scene key="drawer" component={FDrawer} >
                <Scene key="main" titleStyle={{ fontSize: 20, fontFamily: 'Avenir-Roman', color: 'white' }} navigationBarStyle={{ backgroundColor: '#1db198', height: 80, borderBottomWidth: 0 }} >
                  <Scene key="search" component={Search} title="Search" type="replace" initial={true} />
                </Scene>
              </Scene>
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>
    );
  }
}

export default App

[aksonov]

Looks like exception not from this component, do you have full stack?

[sarovin]

Yes, is a Redux exception...not?

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^0.14.8",
    "react-native": "^0.22.2",
    "react-native-drawer": "^2.0.0",
    "react-native-dropdown": "0.0.6",
    "react-native-router-flux": "^3.22.5",
    "react-redux": "^4.4.1",
    "realm": "^0.11.1",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-middleware-oneshot": "^0.1.1",
    "redux-thunk": "^2.0.1"
  },
  "devDependencies": {
    "eslint": "^2.8.0",
    "eslint-config-airbnb": "^7.0.0",
    "eslint-plugin-import": "^1.5.0",
    "eslint-plugin-jsx-a11y": "^1.0.2",
    "eslint-plugin-react": "^5.0.1",
    "redux-devtools": "^3.1.1",
    "remote-redux-devtools": "^0.1.5"
  }
}

[aksonov]

The component DOESN"T depend from redux. It just uses 'this.props.dispatch' if it is provided.
Do you have full error stack?

[sarovin]

Yes,

[aksonov]

Do you see anywhere files from this component?

[sarovin]

I have a reducers.js

// routes.js

const initialState = {
  scene: {},
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // focus action is dispatched when a new screen comes into focus
    case "focus":
      return {
        ...state,
        scene: action.scene,
      };

    // ...other actions

    default:
      return state;
  }
}

and combine reducers in app.js

What do you mean with 'Do you see anywhere files from this component'?

I have this error at the startup.

[sarovin]

I can't call connect() in the app.js, not?

[sarovin]

Ok, i have a solution:

routes.js

import React                  from 'react-native'
import {
  Scene,
  Switch,
  Modal,
  Router
}                             from 'react-native-router-flux'
import { connect }            from 'react-redux'

import SignIn                 from './Containers/SignIn'
import SignUp                 from './Containers/SignUp'
import Search                 from './Containers/Search'
import OTPScreen              from './Containers/OTPScreen'
import FDrawer                from './Components/FDrawer'

const selectorCheck = (user) => {

  if ( user && ( user.auth_token || user.isGuest ) ) {
    return 'drawer'
  }
  return 'auth'
}

const RouterWithRedux = connect()(Router)

class Routes extends React.Component {

  render () {
    return (
      <RouterWithRedux>
        <Scene key="modal" component={Modal}>
          <Scene key="root"
            hideNavBar={true}
            component={connect(state=>({user:state.user}))(Switch)}
            selector={ ({ user }) => selectorCheck(user) }
            tabs={true}
            >
            <Scene key="auth" >
              <Scene key="signin" component={SignIn} title="Accedi all'App" type="replace" direction="vertical" initial={true} />
              <Scene key="signup" component={SignUp} title="Crea il tuo account" direction="vertical" />
              <Scene key="otpScreen" component={OTPScreen} title="Verifica di sicurezza" direction="vertical" />
            </Scene>
            <Scene key="drawer" component={FDrawer} >
              <Scene key="main" >
                <Scene key="search" component={Search} title="Search" type="replace" initial={true} />
              </Scene>
            </Scene>
          </Scene>
        </Scene>
      </RouterWithRedux>
    );
  }
}

export default Routes

app.js

import React, { Component }                   from 'react-native'
import {
  createStore,
  applyMiddleware,
  combineReducers
}                                             from 'redux'
import { middleware as netInfo }              from './Middleware/redux-middleware-react-native-netinfo'
import { Provider }                           from 'react-redux'
import thunk                                  from 'redux-thunk'
import createLogger                           from 'redux-logger'
import { getAuth }                            from './Lib/auth'

import * as reducers                          from './reducers'
import { checkConnection }                    from './actions/NetworkActions'
import Routes                                 from './routes';

const logger = createLogger()
const createStoreWithMiddleware = applyMiddleware(thunk, logger, netInfo)(createStore)
const reducer = combineReducers(reducers)
const store = createStoreWithMiddleware(reducer)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
          <Routes />
      </Provider>
    );
  }
}


export default App

[aksonov]

Just typo for connect import...