Low performance in React Native with Redux

I have discovered some issues with performance in my react native app. It seems to be caused by react-redux bundle.

As you can see in the video

https://youtu.be/D5L-RM5EY5E

there is a significant delay between action dispatching and view rendering. On real devices it looks even worse. There are no API calls in this example. Only simple actions dispatching and state changes. On other hand Facebook Flux implementation and simple call of setState work much more faster.

Any ideas how to improve the app performance?

I am using react: v15.2.1, react-native: v0.29.2, react-redux: v4.4.5, View

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import {Map} from 'immutable';

import * as testActions from '../reducers/test/testActions';
import {Actions} from 'react-native-router-flux';

const actions = [
  testActions
];

function mapStateToProps(state) {
  return {
      ...state
  };
}

function mapDispatchToProps(dispatch) {
  const creators = Map()
          .merge(...actions)
          .filter(value => typeof value === 'function')
          .toObject();

  return {
    actions: bindActionCreators(creators, dispatch),
    dispatch
  };
}

........

<View style={styles.box}>
    {PRICE_FILTERS.map(filter =>{
        let price_cont_style = {};
        let price_text_style = {};
        if (filter.id == PRICE_FILTERS[3].id){
            price_cont_style.marginRight = 0;
        }
        if (filter.id == this.props.test.price){
            price_cont_style.backgroundColor = 'black';
            price_text_style.color = 'white';
        }
        return(
        <TouchableOpacity 
            key={filter.id} 
            style={[styles.price_cont, price_cont_style]} 
            onPress={()=>this.props.actions.setPrice(filter.id)}>
        <Text 
            style={[styles.price_text, price_text_style]}>
            {filter.label}
        </Text>
        </TouchableOpacity>
        );
    })}
</View>

......

export default connect(mapStateToProps, mapDispatchToProps)(PerformanceTest);

Actions

const {
    TEST_SET_PRICE,
} = require('../../lib/constants').default;

export function setPrice(filter) {
  return {
    type: TEST_SET_PRICE,
    payload: filter
  };
}

Reducer

const {
    TEST_SET_PRICE,
} = require('../../lib/constants').default;
const InitialState = require('./testInitialState').default;
export default function authReducer(state = InitialState, action) {
  switch (action.type) {

  case TEST_SET_PRICE:
        if (state.price!=action.payload){
            return {price:action.payload}
        } else{
            return state;
        }

    }
    return state;
}

[alsh76]

@davidsamacoits If you are using v4 hopefully you can omit first step https://github.com/aksonov/react-native-router-flux#v4-features each ‘scene’ could have onEnter/onExit handlers. Access to your app navigations state as simple as Actions.state, use Actions.currentScene to get name of current scene. I hope that helps

[alsh76]

oh that was a bit tricky. I used old v3 First step was creating a custom reducer. It tracked navigation events and saved it in special redux store

   reducerCreate(params){
        const defaultReducer = Reducer(params);
        return (state, action)=>{
            switch (action.type) {
                case ActionConst.PUSH:
                    //fired on regular scene-to-scene transition
                    //you can detect active scene key by action.key
                    store.dispatch(navigationPush(action.key));
                    break;
                case ActionConst.BACK_ACTION:
                    //fired on android back action
                    store.dispatch(navigationBack());
                    break;
                case ActionConst.JUMP:
                case ActionConst.REFRESH:
                    //fired on tab switching
                    //action.key points on active tab
                    store.dispatch(changeTab(action.key));
                    break;
                case ActionConst.POP:
                case ActionConst.POP_TO: 
                    //fired on Action.pop()
                    store.dispatch(popTo(action.scene));
                    break;
                case ActionConst.FOCUS:
                    //immediately fired on any new scene opening
                    //it does not wait end of transition 
                    //....
                    break;
            }
            return defaultReducer(state, action);
        }
    }

....

  render() {
    return (
        <Provider store={store}>
        <Router createReducer={this.reducerCreate}>
        <Scene key="root">
        ....
	    </Router>
	    </Provider>

Second step - override shouldComponentUpdate in every your scene component

class SomesSceneComponent extends Component{

    shouldComponentUpdate(nextProps, nextState){
        //check navigation redux store for active tab and scene
        if (this_scene_is_not_active){
            return false;
        }
        return true;
    }
.....