Warm tip: This article is reproduced from stackoverflow.com, please click
react-native react-redux redux

Redux

发布于 2020-04-08 09:29:45

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>
    </>
  );
}
Questioner
Victor Lourenço
Viewed
20
Charlie 2020-02-04 00:27

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 }){
 ...
}