React StackNavigator with lifted state howto - react-native

Question

I work with StackNavigator for navigation between a couple of screens. In these screens i will collect user information. I would like this information to be stored in one state so each view will have the same information.
I got this working but i think it is not the correct or ideal because i keep track of 2 states. One in the starting view and one in the current view.
Hence my question is, is it possible to work with only one state?
Here is my code:
My root class which creates the StackNavigator:
//#flow
import React from 'react';
import {StackNavigator} from 'react-navigation';
import Cart from './Cart';
import DeliveryAddress from './DeliveryAddress';
import Queue from './Queue';
export type State = {
text: string,
user: string,
onChange: Function
}
const Screens = StackNavigator({
Cart: {
screen: Cart
},
Queue: {
screen: Queue
},
DeliveryAddress: {
screen: DeliveryAddress
}
});
const AppNavigation = () => (<Screens/>);
export default class Root extends React.Component < Object,
State > {
render() {
return <AppNavigation/>;
}
}
Here my first view the Cart:
// #flow
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Text, View, Button} from 'react-native';
import DeliveryAddress from './DeliveryAddress';
import type {State}
from './Root';
export default class Cart extends Component < Object,
State > {
static navigationOptions = {
title: 'Welcome'
};
handleChange: Function;
getState: Function;
constructor(props : Object) {
super(props);
console.log("Construction Cart with state");
console.log(this);
console.log("props");
console.log(this.props);
this.handleChange = this.handleChange.bind(this);
this.state = {
user: "Lucy",
text: "Vul in",
onChange: this.handleChange,
getState: this.getState
};
}
handleChange(data : Object) {
this.setState(...data);
}
render() {
const {navigate} = this.props.navigation;
return (<View>
<Text>This is your cart.</Text>
<Button onPress={() => navigate('DeliveryAddress', this.state)} title="Go to delivery address"/>
</View>);
}
}
and here is my second view:
// #flow
import React, {Component} from 'react';
import {Text, View, Button, TextInput} from 'react-native';
import type {NavigationScreenProp}
from 'react-navigation/src/TypeDefinition';
import type {State}
from './Root';
type NavigationType = {
navigation: NavigationScreenProp < NavigationState >
}
type NavigationState = {
params: {
user: "bar"
}
}
export default class DeliveryAddress extends Component < any,
State > {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({navigation} : NavigationType) => ({title: `Delivery address of ${navigation.state.params.user}`});
handleChange: Function;
constructor(props : Object) {
super(props);
this.state = props.navigation.state.params;
console.log(props.navigation.state);
this.handleChange = this.handleChange.bind(this);
}
handleChange(data : Object) {
this.setState(data);
this.state.onChange(data);
}
render() {
console.log("welkom in delivery address");
// The screen's current route is passed in to `props.navigation.state`:
const {navigate} = this.props.navigation;
return (<View>
<Text>User name: {this.state.user}</Text>
<TextInput style={{
height: 40,
borderColor: 'gray',
borderWidth: 1
}} onChangeText={(text) => this.handleChange({text})} value={this.state.text}/>
<Button onPress={() => navigate('Queue', this.state)} title={this.state.text}/>
</View>);
}
}
The thing is that i need to set both states like this:
handleChange(data : Object) {
this.setState(data);
this.state.onChange(data);
}
Is this the best way of doing this?

Answer 1

it seems that there is a nice way to solve this: Using Redux with a Provider.
with the provider it is possible do add information to a 'context':
import {Provider, connect} from "react-redux";
return (<Provider store={store}>
<AppNavigation/>
</Provider>);
the provider will add the store to the context. Any child (and grandchild) can use this store like this:
console.log("this.context");
console.log(this.context);
const {store} = this.context;
above will only work if you add this into the component:
Cart.contextTypes = {
store: PropTypes.object
}
here is more info:
https://egghead.io/lessons/react-redux-passing-the-store-down-implicitly-via-context