CODEWITHSUNDEEP
react-nativereduxreact-redux
Tanu Sharma
Tanu Sharma

Reputation: 75

How to render redux store value in function component?

I am working on react native 0.62 in which i have used Drawer Navigator. when user logged into the app i am storing auth api response into the redux store. After login, i wanted to display logged in user name in the dashboard header but i am unable to use redux store inside my function. Tried with hooks but not worked. Any help or suggestion. Thank You in advance. Here is my code:

const GradientHeader = props => (
  <View style={{ backgroundColor: 'transparent' }}>
      <LinearGradient
        colors={['#6CCFF6', '#596AB2']}
        start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
      >
          <Header {...props} />   
      </LinearGradient>
    </View>
  ) 

const DashboardStackScreen = ({ navigation }) => {
  return (
    <DashboardStack.Navigator screenOptions={{
      headerTitle: 'Good Morning, John', // i wanted to access the redux store here 
      header: props => <GradientHeader {...props} />,     
      headerLeft: () => (
        <TouchableOpacity onPress={navigation.openDrawer} style={{padding: 20}}>
          <Image source={require('../assets/images/menu_bar.png')} style={{width:18, height:12}}/>
        </TouchableOpacity>
      ),
      headerTransparent: true,
      headerStyle: {
        backgroundColor:  'transparent' 
      },
      headerTintColor: '#fff',    
      headerTitleStyle: { fontFamily: 'OpenSans-SemiBold', fontSize: 20},
    }}>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
}

const MainNavigator = ({navigation}) => {
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}

const mapStateToProps = state => {
  return {
    data: state
  };
};
export default connect(mapStateToProps)(MainNavigator);

login.reducer.js import { AUTH_REQUEST, AUTH_SUCCESS, AUTH_FAILURE, SET_AUTH } from '../utility/Constants';

const INITIAL_STATE = { user: {}, loading: false, error: '', //false isAuthorized: false };

const login = (state = INITIAL_STATE, action) => { switch (action.type) { case AUTH_REQUEST: return Object.assign({}, state, { loading: true, user: {}, error: '',//false isAuthorized: false }); case AUTH_SUCCESS: return Object.assign({}, state, { user: action.payload, loading: false, error: '',//false isAuthorized: true }); case AUTH_FAILURE: return Object.assign({}, state, { user: {}, error: action.payload,//true, loading: false, isAuthorized: false }); case SET_AUTH: return Object.assign({}, state, { error: '',//true, loading: false, }); default: return state; } };

export default login;

Upvotes: 0

Views: 741

Answers (3)

Tanu Sharma
Tanu Sharma

Reputation: 75

Instead of using store value from mapStateToProps in my DashboardScreenStack, which was not working, i have directly called store.getState() from my function based component. it works for me as i needed.

Upvotes: 0

Abhishek
Abhishek

Reputation: 301

You can use props.data to use in the component wherever in the component you want to display, try like this headerTitle: props.data

Upvotes: 0

Darshita Golchha
Darshita Golchha

Reputation: 46

If you have connected to the store using Provider then you can access to the data in your component MainNavigator with props as data since your mapStateToProps returns data which has your state.

const MainNavigator = ({navigation, data}) => {
   console.log('Redux store data', data);
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}

Upvotes: 0

Related Questions