The mapStateToProps
don't get the state from store
. the console.log response is:
Object {
"selectStateClassify": Object {
"newClassify": "É pra vir algo",
},
}
and is given a message error that says Can't find variable: stateClassify
, I know it's a property, but i don't know how to use this property like an object. I would like to use stateClassify
in the tag <Text>{stateClassify}</Text>
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
function Classificacao({ navigation }){
return(
<View style={{
flex: 1,
paddingTop: 30,
flexDirection: 'column',
alignItems: 'center',
}}
>
<Text style={{
textAlign: 'center',
paddingHorizontal: 60,
fontSize: 25,
}}
>Com base no Manual de Quadros do AIDPI, o paciente pode apresentar:</Text>
<Text style={{
textAlign: 'center',
paddingHorizontal: 60,
marginTop: 80,
fontSize: 25,
fontWeight: 'bold',
}}
>{stateClassify}</Text>
<TouchableOpacity
style={styles.goButton}
onPress={() => { navigation.navigate('Doencas'); }}
>
<Text style={styles.textButton}>Resultado</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({...});
const mapStateToProps = state => {
console.log(state);
return{
stateClassify: state.selectStateClassify.newClassify,
}
};
export default connect(mapStateToProps)(Classificacao);
Another issue that i found is on reducer, I don't know what kind of problem it is, but the reducer don't get the action params to change the state, the code is below:
import { SHOW_CLASSIFY } from '../actions/type';
const initialState = {
newClassify: 'É pra vir algo'
}
export const selectClassify = (state = initialState, action) => {
switch(action.type){
case SHOW_CLASSIFY:
return{
...state,
newClassify: action.newClassify
};
default:
return state;
}
}
action code:
import { SHOW_CLASSIFY } from './type';
export const showClassify = (classify) => ({
type: SHOW_CLASSIFY,
newClassify: classify
});
store code:
import { createStore } from 'redux';
import { Reducers } from '../reducers/index';
export const Store = createStore(Reducers);
App.js code:
import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import Routes from './src/routes';
import { Store } from './src/redux/store/store';
export default function App() {
return (
<>
<Provider store={Store}>
<StatusBar barStyle="light-content" backgroundColor="#f89747" />
<Routes />
</Provider>
</>
);
}
Add stateClassify to your destructured props so you can use it like that, remember that you are mapping the props to your component but as you are destructuring props in function params you need to add it also.
function Classificacao({ navigation, stateClassify }){
...
}
it does works,thanks!! But the reducer still don't read the action params. a
console.log(action.type)
beforeswitch
showsundefined
.How are you dispatching the action, I see your reducer code but not where you are dispatching the action?