I found some performance issues in my native application. This is apparently caused by a beam of reduction reactions.
As you can see in the video
Comparison of Redux / Flux / setState
There is a significant delay between dispatching actions and rendering views. On real devices, it looks even worse. There are no API calls in this example. Only simple scheduling and state changes. On the other hand, the Facebook Flux implementation and the simple setState call are much faster.
Any ideas on improving application performance?
I use react: v15.2.1, response-native: v0.29.2, reaction-reduction: 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
};
}
Gearbox
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;
}