react-native - docs - redux persist react navigation

Redux & NavigatorIOS no actualiza el estado en vistas secundarias en react-native?

Question

¿Cómo puedo hacer que las vistas principales y de actualización de actualización de redux estén dentro de un NavigatorIOS?

Las vistas maestra y detallada no se actualizan:

Vista principal> TabBar> TabBarItem> NavigatorIOS> MasterMenu> Detalle

Otro trabajo de TabBarItem es genial usando redux. Por ejemplo:

Vista principal> TabBar TabBarItem> ViewProfile

 <Icon.TabBarItem
style={{borderColor:''red'', borderWidth:0}}
{...this.props}
iconName="timeline"
title="View"
selected={this.state.selectedTab === ''viewTab''}
onPress={() => {
this.setState({
selectedTab: ''viewTab'',
presses: this.state.presses + 1
});
}}>
<ViewProfile {...this.props} />
</Icon.TabBarItem>

Este MainView> TabBar> TabBarItem> NavigatorIOS> MasterMenu> El detalle NO se actualiza:

<Icon.TabBarItem
style={{borderColor:''red'', borderWidth:0}}
title={''Menu''}
iconName="more-vert"
selected={this.state.selectedTab === ''moreTab''}
onPress={() => {
this.setState({
selectedTab: ''moreTab'',
});
}}>
<View style={ss.container}>
<NavigatorIOS
ref="nav"
style={ss.container}
{...this.props}
initialRoute={{
title: ''Master Menu'',
component: MasterMenu,
passProps: {
...this.props,
},
}}
/>
</Icon.TabBarItem>
</TabBarIOS>

Así es como me conecto y paso accesorios a MainView que contiene NaigatorIOS> MasterMenu> Detalle

Archivo: mainApp.js

class MainApp extends Component {
constructor(props) {
super(props);
}
render() {
console.log(''****** MainApp::render ****'');
const { state, actions } = this.props;
return (
<MainView
{...this.props} />
);
}
}
// mapStateToProps
function mapStoreStateToComponentProps(state) {
return {
state: state.appState,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, appActions), dispatch),
}
}
export default connect(
mapStoreStateToComponentProps,
mapDispatchToProps
)(MainApp)

Puedo profundizar en un NavigatorIOS que contiene una vista MasterMenu-> DetailMenu, invocar una acción en la vista de detalles, los cambios de estado y todas las demás vistas en la actualización de TabBarIOS. Sin embargo, el estado de reducción tanto en la vista maestra como en la vista detallada contenida dentro de <NavigatorIOS> conserva sus valores originales.

¿PassProps no es la manera de hacerlo?

¿O hay otros métodos de escucha o suscripción que una vista principal y secundaria puede usar para actualizar cuando cambia el estado del almacén de datos?

Answer 1

Problema conocido con NavigatorIOS

NavigatorIOS no devuelve una escena, cuando passProps cambió.

Desvío conectando redux en un punto más bajo en la jerarquía

Puede omitir este problema al conectar su componente MasterMenu con redux, en lugar de MainView .

Answer 2

El consejo de @purii resolvió mi problema.

Creé un contenedor para el componente "Vista maestra" cargado en el componente NavigatorIOS.

También creé envoltorios para todos los componentes de "Vista de niños" que se profundizaron desde el componente "Vista maestra". Esto parece feo e incorrecto, pero funciona. Usando NavigatorIOS passProps parecía romper las actualizaciones de redux.

var React = require(''react-native'');
var {
Component,
} = React;
import {bindActionCreators} from ''redux'';
import { connect } from ''react-redux'';
import * as appActions from ''../actions/appActions'';
var MasterListView = require(''../../MasterListView'');
class MasterListWrapper extends Component {
constructor(props) {
super(props);
}
render() {
console.log(''****** PlanList::render ****'');
return (
<MasterListView {...this.props} />
);
}
}
// mapStoreStateToComponentProps would be a more descriptive name for mapStateToProps
function mapStateToProps(state) {
return {
state: state.appState,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, appActions), dispatch),
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MasterListWrapper)

Y luego paso MasterListWrapper como el componente NavigatorIOS :

<Icon.TabBarItem
style={{borderColor:''red'', borderWidth:0}}
title="Plan"
iconName="list"
selected={this.state.selectedTab === ''planTab''}
onPress={() => {
this.setState({
selectedTab: ''planTab'',
presses: this.state.presses + 1
});
}}>
<View style={ss.container}>
<NavigatorIOS
ref="nav"
style={ss.container}
initialRoute={{
title: ''Field Planner'',
component: MasterListWrapper,
passProps: {
},
}}
/>
</View>
</Icon.TabBarItem>

En el MasterListView necesité agregar componentWillReceiveProps para que mi ListView vuelva a aparecer cuando el estado de reducción cambió.

 componentWillReceiveProps: function(nextProps) {
this.setState({
// Force all rows to render
dataSource: ds.cloneWithRows(nextProps.state.waypointItemList),
});
},

Probablemente este no sea el mejor enfoque. Estaré buscando mejores enfoques.

Sin embargo, en este punto de mi curva de aprendizaje de javascript y react-native, estoy feliz de que funcionó.

Redux es muy bueno. Tengo varias pestañas. Puedo ir al menú y cambiar una configuración, por ejemplo, cambiar unidades de pies a metros, y todas mis vistas se vuelven a renderizar.