How do I access store state using nativebase

Question

I try to find good examples on that but I can't manage to find a solution.

I'm using nativebase for learning react native and I want to know how can I access a state from store. Right now I have a page that sets "username" on the store using dispatch. I know it's there and it has value.

This part is working fine. But I can't find examples on how to subscribe this state on a component.

Why I can see navigation as props but not username?

Thanks for any help.

This a basic component (using nativebase) of my project looks likes this:

import React, { Component } from 'react';
import { Image } from 'react-native';
import { connect } from 'react-redux';
import { Container, Content, Button, View, H3, Header, Title, Icon, Text } from 'native-base';

import { openDrawer } from '../../actions/drawer';
import myTheme from '../../themes/base-theme';
import styles from './styles';

import { actions } from 'react-native-navigation-redux-helpers';

const {
  replaceAt,
} = actions;

class SamplePage extends Component { // eslint-disable-line

  replaceAt(route) {
    this.props.replaceAt('register', { key: route }, this.props.navigation.key);
  }

  render() {
    // console.log(this.props.username); <-- returns empty (not null or undefined)
    // console.log(this.props.navigation); <-- returns an object
    return (
      <Container theme={myTheme}>

            <Header>
                <Title>Sample Page</Title>
                <Button transparent onPress={() => this.replaceAt('register')}>
                    <Icon name="ios-arrow-back" />
                </Button>
            </Header>

            <Content style={styles.content}>
              <Text style={styles.heading}>
                Eiusmod tempor incididunt
              </Text>
                <Text style={styles.text}>
                  Lorem ipsum dolor sit amet, consectetur.
                </Text>

            </Content>
        </Container>
    );
  }
}

function bindActions(dispatch) {
  return {
    replaceAt: (routeKey, route, key) => dispatch(replaceAt(routeKey, route, key))
  };
}

const mapStateToProps = state => ({
  navigation: state.cardNavigation,
});

export default connect(mapStateToProps, bindActions)(SamplePage);

Hi Azium, this is an example. I have this on the real component. I have two components. One for login (that sets actions for username state) and this one, empty, that loads after I set up the state. — homemrobo, Dec 09 '16 at 16:33

score 0 · Answer 1 · answered Dec 12 '16 at 06:12

0

Did you check Native Starter Kit?

This might help you.

answered Dec 12 '16 at 06:12

Supriya Kalghatgi

1,155
9
10

score 0 · Answer 2 · answered Dec 14 '16 at 19:16

0

you need to read it from store via mapStateToProps

const mapStateToProps = state => ({
   username: state.username, //for example
   navigation: state.cardNavigation,
});

answered Dec 14 '16 at 19:16

Ahmed Ali

2,574
2
23
38

How do I access store state using nativebase

2 Answers2