Redux didn't update component - react-native

Question

I'm pretty new in React-Native. I'm trying to display a list of devices, then go to one device, go to its informations, change the name, and with redux to change the name on all "screens" but it didn't work. I thing I a little bit lost between props, state and global state...
All the navigation, views and APIs works well.
This is my list view:
class DeviceList extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
};
this._getDevices();
// BINDING
this._goToDevice = this._goToDevice.bind(this);
this._goToDeviceAdd = this._goToDeviceAdd.bind(this);
}
componentDidUpdate() {
console.log("DEVICE_LIST componentDidUpdate : ");
console.log(this.props.devices);
}
_goToDevice(id = number) {
this.props.navigation.navigate('DeviceDetail', { idDevice: id })
}
_getDevices() {
restGet('devices')
.then(data => {
// REDUX
const action = { type: "INIT_DEVICE_LIST", value: data.datas };
this.props.dispatch(action);
// STATE
this.setState({
isLoading: false
});
});
}
_displayList() {
if (!this.state.loading && this.props.devices && this.props.devices.length > 0) {
return (
<View style=>
<FlatList
// data={this.state.devices}
data={this.props.devices}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <DeviceItem device={item} goToDevice={this._goToDevice}
/>}
/>
</View>
)
}
}
render() {
return (
<View style={styles.main_container}>
{/* LOADING */}
<Loading loading={this.state.isLoading}/>
{/* LIST */}
{this._displayList()}
</View>
);
}
}
// REDUX
const mapStateToProps = (state) => {
return {
devices: state.devices
};
};
export default connect(mapStateToProps)(DeviceList);
This is my Device Detail screen:
class DeviceDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
device: null,
isLoading: true,
};
//
this._getDevice();
}
componentDidUpdate() {
console.log("DEVICE_DETAIL componentDidUpdate : ");
console.log(this.props.devices);
}
_goToDeviceInfo() {
this.props.navigation.navigate('DeviceInfo', { deviceId: this.state.device.id })
}
_getDevice() {
restGet('devices/' + this.props.navigation.getParam('idDevice'))
.then(data => {
// REDUX
const action = { type: "UPDATE_DEVICE", value: data.datas };
this.props.dispatch(action);
// STATE
this.setState({
device: this.props.devices.find(d => d.id === this.props.navigation.getParam('idDevice')),
isLoading: false,
});
});
}
_displayTile() {
if (this.state.device) {
return (
<View>
<Text>{this.state.device.name}</Text>
<TouchableOpacity onPress={() => this._goToDeviceInfo()}>
<FontAwesomeIcon icon={ faCog } size={ 18 } />
</TouchableOpacity>
</View>
)
}
}
render() {
return (
<View style={styles.main_container}>
{/* LOADING */}
<Loading loading={this.state.isLoading}/>
{/* TILE */}
{this._displayTile()}
</View>
);
}
}
// REDUX
const mapStateToProps = (state) => {
return {
devices: state.devices
};
};
export default connect(mapStateToProps)(DeviceDetail);
My Device Info Screen
class DeviceInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
// device: this.props.navigation.getParam('device')
// device: this.props.devices.find(d => d.id === this.props.navigation.getParam('deviceId')),
};
// BINDING
this._saveItem = this._saveItem.bind(this);
}
componentDidUpdate() {
console.log("DEVICE_INFO componentDidUpdate : ");
console.log(this.props.devices);
}
_saveItem(name) {
// DB
// restPost('devices', {'id': this.state.device.id, 'name': name})
console.log();
restPost('devices', {'id': this.props.devices.find(d => d.id === this.props.navigation.getParam('deviceId')).id, 'name': name})
.then(data => {
// REDUX
const action = { type: "UPDATE_DEVICE", value: data.datas };
this.props.dispatch(action);
});
}
_removeDevice() {
Alert.alert(
'Supprimer l\'Appareil',
'Voulez-vous vraiment supprimer cet Appareil ?',
[
{
text: 'Annuler',
style: 'cancel',
onPress: () => console.log('Cancel Pressed'),
},
{
text: 'Oui, je souhaite le supprimer.',
onPress: () => {
// REDUX
const action = { type: "DELETE_DEVICE", value: this.state.device };
this.props.dispatch(action);
this.props.navigation.navigate('DeviceList')
}
},
],
{cancelable: false},
);
}
render() {
// const device = this.state.device;
const device = this.props.devices.find(d => d.id === this.props.navigation.getParam('deviceId'));
return (
<View style={ styles.main_container }>
<DeviceInfoItem device={device} title={'NOM'} value={device.name} edit={true} saveItem={this._saveItem}/>
<View style={styles.footer}>
<TouchableOpacity style={styles.startButton} onPress={() => this._removeDevice()}>
<FontAwesomeIcon icon={ faTrash } style={styles.footer_element_icon}/>
<Text style={styles.footer_element_text}>Supprimer l'Appareil</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
// REDUX
const mapStateToProps = (state) => {
return {
devices: state.devices
};
};
export default connect(mapStateToProps)(DeviceInfo);
My Device Info Item Component
class DeviceInfoItem extends React.Component {
constructor(props) {
super(props);
this.state = {
displayForm: false,
};
this.editText = '';
console.log(this.props);
}
componentDidUpdate() {
console.log("DEVICE_INFO_ITEM componentDidUpdate");
}
_displayValue() {
if (this.props.edit && this.state.displayForm) {
return (
<View>
<Input
placeholder={this.props.title}
// value={value}
leftIcon={<FontAwesomeIcon icon={ faTag } size={ 10 } />}
leftIconContainerStyle={ styles.inputIcon }
onChangeText={(text) => {
this.editText = text;
}}
/>
</View>
);
} else {
return (
<View>
<Text style={ styles.title }>{ this.props.title }</Text>
<Text style={ styles.value }>{ this.props.value }</Text>
</View>
);
}
}
_displayButton() {
if (this.props.edit) {
if (!this.state.displayForm) {
return (
<TouchableOpacity style={styles.edit} onPress={() => {
this.setState({
displayForm: true
})
}}>
<FontAwesomeIcon icon={ faPen } style={ styles.info_icon } size={ 14 } />
</TouchableOpacity>
);
} else {
return (
<TouchableOpacity style={styles.edit} onPress={() => {
this.props.saveItem(this.editText);
this.setState({
displayForm: false,
});
}}>
<FontAwesomeIcon icon={ faCheck } style={ styles.info_icon } size={ 14 } />
</TouchableOpacity>
);
}
}
}
render() {
return (
<View>
<View style={ styles.line }>
{ this._displayValue() }
{ this._displayButton() }
</View>
<Divider style={ styles.divider } />
</View>
);
}
}
export default DeviceInfoItem;
And my reducer:
const initialState = {
devices: []
};
function updateDevices(state = initialState, action) {
let nextState;
// CHECK IF DEVICE EXIST
const deviceIndex = state.devices.findIndex(device => device.id === action.value.id);
let device = state.devices.find(device => device.id === action.value.id);
switch (action.type) {
case 'INIT_DEVICE_LIST':
console.log('INIT_DEVICE_LIST');
nextState = {
...state,
devices: action.value
};
return nextState || state;
case 'ADD_DEVICE':
console.log('ADD_DEVICE');
nextState = {
...state,
devices: [...state.devices, action.value]
};
return nextState || state;
case 'DELETE_DEVICE':
console.log('DELETE_DEVICE');
if (deviceIndex !== -1) {
nextState = {
...state,
devices: state.devices.filter( (item, index) => index !== deviceIndex)
}
}
return nextState || state;
case 'UPDATE_DEVICE':
console.log('UPDATE_DEVICE');
if (deviceIndex !== -1) {
let d = state.devices;
d[deviceIndex] = action.value;
nextState = {
...state,
devices: d
}
}
return nextState || state;
default:
return state
}
}
export default updateDevices;
Delete Device works very well, the devices list in well updated. But the name updating didn't work. When I save, I got a console log ('DEVICE_INFO_ITEM componentDidUpdate) but not ('DEVICE_INFO componentDidUpdate). Why ?

Answer 1

create a file index.js in your reducer folder and do this:
import { combineReducers } from 'redux';
import myreducer from './Reducerfile';
export default combineReducers({
reducer: myreducer
});
And then
// REDUX
const mapStateToProps = (state) => {
return {
devices: state.reducer.devices
};
};
export default connect(mapStateToProps)(DeviceInfo);