ReactRedux array prop empty - arrays

Question

I'm quite new to React and have searched through so many StackOverflow responses but with no joy. So when an array of employees is passed to a reducer and then a component, the prop is empty the first time and then contains data on subsequent renders. Does anyone know how to prevent react rendering until the employees props contains data?
--------Update
So i added isloading to the reducer initial state and tried to send it to the component but i receive a really horrible error
TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant
this is my updated case statement
case EMPLOYEES_FETCH_SUCCESS:
return {
list: action.payload,
isloading: false
}
New error message
Many thanks
the data array looks like this when it is populated
data structure
Reducer code:
import { EMPLOYEES_FETCH_SUCCESS, USER_ADD } from "../actions/types";
const INITIAL_STATE = {};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEES_FETCH_SUCCESS:
return action.payload;
case USER_ADD:
return state;
default:
return state;
}
};
this is my action dispatch statement
dispatch({ type: EMPLOYEES_FETCH_SUCCESS, payload: returnArray });
Component code:
componentWillMount() {
this.props.employeesFetch();
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
this.createDataSource(nextProps);
}
createDataSource({ employees }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(employees);
}
onButtonPress() {
Actions.GroupChatContainer(); //Need to send bar's chat record
}
renderRow(employee) {
return <ListItem employee={employee} />;
}
render() {
console.log(this.props.employees);
return (
<View>
<ListView
style={styles.listStyle}
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
<Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
</View>
);
}
}
const mapStateToProps = state => {
console.log(state.employees);
const employees = _.map(state.employees, (val, uid) => {
return { ...val, uid };
});
return { employees };
};

Answer 1

Does anyone know how to prevent react rendering until the employees
props contain data?
Sure, just do a check and return null:
render() {
if (!this.props.employees) {
return null;
}
return (
<View>
<ListView
style={styles.listStyle}
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
<Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
</View>
);
}
Or inside JSX:
render() {
return (
<View>
{this.props.employees &&
<ListView
style={styles.listStyle}
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
}
<Button onPress={this.onButtonPress.bind(this)}>Group chat</Button>
</View>
);
}

Answer 2

You can have two properties for your store. One for the list of employees and another for the loading state.
import { EMPLOYEES_FETCH_SUCCESS, USER_ADD } from "../actions/types";
const INITIAL_STATE = {
list: [],
isLoading: true,
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEES_FETCH_SUCCESS:
return {
list: action.payload,
isLoading: false,
}
default:
return state;
}
};
And in the render if the state is loading return loading view
render() {
if (!this.props.employees.isLoading) {
return <div>Loading...</div>;
}
...
...
}