Actions not being passed to redux in react-native-router-flux

Question

I followed the instructions set out in https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/REDUX_FLUX.md#step-1 to a tee in version beta.24 and when I navigate via Action.push, pop, replace, etc there is no corresponding action that is passed through to my reducer.

i print at the top of my reducer and can capture events I pass through dispatch manually. Are there common issues that I could run into?

Code

Reducer

import { ActionConst } from 'react-native-router-flux';

const initialState = {
    scene: {},
};

export default function SceneReducer(state = initialState, action) {
    console.log(action);
    switch (action.type) {
        case ActionConst.FOCUS:
            return { ...state, scene: action.scene };
        default:
            return state;
    }
}

Combined Reducers

import { combineReducers } from 'redux';
import SceneReducer from './SceneReducer';

const rootReducer = combineReducers({
    routing: SceneReducer,
    // other reducer here...
});

export default rootReducer;

App

import RootReducer from './RootReducer';

import loginRouter from './LoginRouter';
const ReduxRouter = connect()(Router);

const store = compose(applyMiddleware(thunkMiddleware))(createStore)(RootReducer);

const navigator = Actions.create(
    <Modal hideNavBar>
        <Scene key="root" hideNavBar>
            <Scene key='login1' component{Log1} />
            <Scene key='login2' component{Log2} />
        </Scene>
        <Scene key="modalRoot"><Scene key="modal" component={Comp} /></Scene>
    </Modal>,
);

export default class AppRouter extends Component {
    render() {
        return (
            <Provider store={store}>
                <ReduxRouter scenes={navigator} />
            </Provider>
        );
    }
}

Thanks for the help!

score 4 · Answer 1 · answered May 05 '18 at 02:11

4

Try replace your ReduxRouter with this:

import { Router, Reducer } from 'react-native-router-flux';
import { connect } from 'react-redux';

const ReduxRouter = connect()(({ dispatch, children, ...props }) => (
  <Router
    {...props}
    createReducer={params => (state, action) => {
      dispatch(action);
      return Reducer(params)(state, action);
    }}
  >
    {children}
  </Router>
));

Also, for the reducer, the action's route key is routeName rather than scene (maybe your version differs so look out for both):

I'm using "react-native-router-flux": "4.0.0-beta.27".

answered May 05 '18 at 02:11

Roy Wang

11,112
2
21
42

Thanks, it works like a charm with 4.0.0-beta.27 and redux 3.7.2 – 0x_Anakin May 06 '18 at 12:07
@Syd will this change route from the state? – Anto Antony Jul 15 '18 at 17:39
@AntoAntony your routing is stored in redux, that's the point here. – 0x_Anakin Jul 16 '18 at 14:44
1

@Syd that's right. But the issue is react-native-router-flux is not taking the router state from store. for example time series debugging is not working. do you have any solution for that? – Anto Antony Jul 16 '18 at 15:40

score 1 · Answer 2 · answered May 05 '18 at 20:46

There are some of the modifications that you need to do in your code.

You need to implement and use reducer object from react-native-router-flux, which defines and handles the actions appropriately.

Then bind it to your SceneReducers.js as

import {Reducer, ActionConst, Actions} from 'react-native-router-flux'

const defaultReducer = Reducer();

export default (state, action) => {
console.log(action);
  switch (action.type) {
      case ActionConst.FOCUS:
          return defaultReducer(state, action);

      default:
        return defaultReducer(state, action);
  }
}

It is important to load reducers AFTER actions.create, so don't use import here.

This is because the initial state of the reducer' must be available at compile time and Router is created runtime.

Therefore in your App use

// create actions
// connect your router to the state here
const ReduxRouter = connect((state) => ({ state: state.routing }))(Router);
const RootReducer = require('./RootReducer').default;

// define the store
const store = compose(applyMiddleware(thunkMiddleware))(createStore)(RootReducer);

Have a look at this thread to follow-up.You might run into issues due to non-deep linking of the external states, therefore you can check it on version until 4.0.0-beta.23 as mentioned in this comment.

Hope it helps

Actions not being passed to redux in react-native-router-flux

2 Answers2