Managing state in react-native when using react-navigation - react-native

Question

I am trying to create a to-do app in react-native. It has some some extra functionality such as editing existing tasksand viewing task history. I have a two StackNavigators nested inside a TabNavigator - but I'm struggling to find out exactly how I should be passing state into my application, and then once the state/data is available with the app, how I should then update the application state.
Here is the relevant code for my App:
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
data: [
//Array of to-do objects here.
]
}
}
updateAppData(id, ){
//define function that wraps this.setState(). This will be passed into
application to update application state.
}
render(){
return(
<Root screenProps={this.state}/>
)
}
}
//make Todos Stack-Nav section to sit inside tab1
const TodosWrapper = StackNavigator({
CurrentTodos: { screen: CurrentTodos },
Details: { screen: Details},
EditTodo: { screen: EditTodo},
AddNewTodo: { screen: AddNewTodo}
})
//make History Stack-Nav section to sit inside tab2
const HistoryWrapper = StackNavigator({
CompletedTodos: { screen: CompletedTodos },
CompletedDetails: { screen: CompletedDetails }
})
//Make main tab navigation that wraps tabs 1 and 2
const Root = TabNavigator({
Todos : {
screen: TodosWrapper,
title: "Open Tasks"
},
History: { screen: HistoryWrapper }
})
I then want to pass the state of my App into my screens, such as the one below:
export default class CurrentTodos extends React.Component {
static navigationOptions = {
header: null
}
render(){
const { navigate } = this.props.navigation;
let { data } = this.props.screenProps;
data = data.map( (item, id) => (
<ListItem style={styles.listItem} key={"_"+id}>
<View style={styles.textWrapper}>
<Text style={styles.listItemTitle}>{item.title}</Text>
<Text note>{ item.isComplete ? "Complete" : "In Progress" }</Text>
<Text note>{item.description}</Text>
</View>
<View>
<Button
onPress={() => this.props.navigation.navigate('Details')}
title="Full Details"
style={styles.fullDetails}
/>
</View>
</ListItem>
)
);
return (
<ScrollView style={styles.scrollView}>
<View style={styles.viewHeader}>
<Text style={styles.title}>
Current Tasks
</Text>
<Text
style={styles.addNew}
onPress={() => navigate("AddNewTodo")}
>
+
</Text>
</View>
<List>
{data}
</List>
</ScrollView>
)
}
}
I am currently planning to pass the state into my screens using screenProps={this.state} and then also passing a function that wraps this.setState() so that screen components can update the app's state.
As I am a newbie to all this, I want to make sure I don't pick up poor practices.
Could anyone help me out as to whether or not this is the correct approach? The huge amount of documentation is overwhelming at times! Thanks in advance!

Answer 1

If you want a centralized state, you should definitely give redux a try. Redux is a global immutable state manager.
Summarizing, in redux all your state is stored into a "Store", which wraps your top navigator. This store is composed by many "Reducers" which are the ones holding the current state of your application. Your Components communicate with the store using actions, which are received by the reducers and those communicate the new state to your views and handle the required changes.
Tell me if you need me to add more details. And here you have some references for you to check:
Official Site: http://redux.js.org
Tutorials from the creator: https://egghead.io
Courses: https://www.udemy.com/the-complete-react-native-and-redux-course/
This should get you in the right direction!
Good luck!