How to use Redux and React navigation to make a global counter - reactjs

Question

I am making a React-Native app in which I have a navigator from React Navigation and I also want to implement Redux. I am trying to create a global counter that updates based on an argument.
Here is the actions:
export const setFlags = (value) => {
return {
type: 'SETFLAGS',
value
}
}
export const setNonFlags = (value) => {
return {
type: 'SETNONFLAGS',
value
}
}
Here is the reducer, because its two things that have identical functionality I thought one would work (I am new to Redux):
const initialState = {
flags:0,
nonFlags:0,
}
const AllFlagReducer = (state = initialState, action) =>{
switch(action.type){
case 'SETFLAGS':
return state.flags = state.flags + action.value
case 'SETNONFLAGS':
return state.nonFlags = state.nonFlags + action.value
}
return state
}
export default AllFlagReducer
And here is the button where I would like to send the local state of the "flag" and "nonFlag" to the redux global states. After which I reset the local states and move to the next screen.
<TouchableOpacity style={styles.resetButton}
onPress= {
// dispatch something like flags(in redux):this.state.flags
// dispatch nonFlags(in redux): this.state.nonFlags
() =>{this.resetAll();
navigation.navigate('Specific Scams')
}}>
Help would be greatly appreciated.
UPDATE 1:
The entire component:
class ScamTree extends React.Component {
constructor(props){
super(props)
this.state = {
flags : 0,
nonFlags: 0,
qAnswered:0
}
}
functions that might matter:
resetAll = () =>{
this.setState({flags:0})
this.setState({nonFlags:0})
this.setState({qAnswered:0})
}
the button, (I did not make a separate component for just the button):
<TouchableOpacity style={styles.resetButton}
onPress= {
// dispatch something like flags:this.state.flags
// dispatch nonFlags: this.state.nonFlags
() =>{this.resetAll();store.dispatch({type:"SETFLAGS",value:5})
navigation.navigate('Specific Scams')
}}>
<Text style={{paddingHorizontal:40}}>NEXT</Text>
</TouchableOpacity>
the export to make React Navigation Work:
export default function(props) {
const navigation = useNavigation();
return <ScamTree {...props} navigation={navigation} />;
}

Answer 1

In your .js class you have to bind your action like this
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
<TouchableOpacity style={styles.resetButton}
onPress= {
// dispatch something like flags(in redux):this.state.flags
// dispatch nonFlags(in redux): this.state.nonFlags
() =>{
this.resetAll();
this.props.commanAction.setFlags(your value);
this.props.commanAction.setNonFlags(your value);
navigation.navigate('Specific Scams')
}}>
const mapDispatchToProps = dispatch => {
return {
commanAction: bindActionCreators(commanAction, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Your .js className);
Other code are looks good.

Answer 2

If I understand a comment of yours in another answer, and the snippet of your question update, I believe you need to decorate this functional component:
export default function(props) {
const navigation = useNavigation();
return <ScamTree {...props} navigation={navigation} />;
}
You want to decorate this component with the connect HOC to connect it to your redux store.
First I'd convert that function to a new withNavigation HOC:
const withNavigation = WrappedComponent => props => {
const navigation = useNavigation();
return <WrappedComponent{...props} navigation={navigation} />;
};
withNavigation.displayName = `withNavigation(${WrappedComponent.displayName || 'Component'})`;
Now you can decorate ScamTree as follows:
export default withNavigation(ScamTree);
But now you also need to connect your action creators to your redux store, decorate it with react-redux's connect HOC:
const mapDispatchToProps = {
setFlags,
setNonFlags,
};
export default withNavigation(
connect(null, mapDispatchToProps)(ScamTree),
);
Note: I see it seems you store in local state some flag values, not sure if that is related, but you can map in initial state for this with a mapStateToProps as the first parameter for connect instead of null.
By now you've probably noticed that each new HOC creates some nesting, and this will get worse with the more HOC's used. The solution is to use redux's compose HOC. That's right, it's not just for composing middleware for the store. It can compose all the decorators into a single HOC to wrap your exported component, or in other words, it flattens/eliminates the nesting.
Tips
All compose does is let you write deeply nested function
transformations without the rightward drift of the code. Don't give it
too much credit!
...
import { compose } from 'redux';
...
class ScamTree extends Component { ... }
const mapDispatchToProps = {
setFlags,
setNonFlags,
};
export default compose(
withNavigation,
connect(null, mapDispatchToProps),
)(ScamTree);
Note: Your reducers need to always return new state object references and never mutate existing state. Also, although your returns do work correctly, the reducer pattern is to return unhandled action types in the default switch case:
const AllFlagReducer = (state = initialState, action) => {
switch(action.type){
case 'SETFLAGS':
return { ...state, flags: state.flags + action.value };
case 'SETNONFLAGS':
return { ...state, nonFlags: state.nonFlags + action.value };
default:
return state;
}
}

Answer 3

In your reducer cases right now you writing new state over the whole state instead just in the fit place at state object, it can be written like
const AllFlagReducer = (state = initialState, action) =>{
switch(action.type){
case 'SETFLAGS':
return { ...state, flags: state.flags + action.value }
case 'SETNONFLAGS':
return { ...state, nonFlags: state.nonFlags + action.value }
default: return state
}
}
export default AllFlagReducer