CODEWITHSUNDEEP
reactjsreact-nativereduxredux-thunk
James111
James111

Reputation: 15903

Problems accessing state in React-native with redux app

So I'm new to Redux and am having problems accessing the STATE. When I add the constructor() method into my Component (Welcome) I get a Cannot find module /Welcome error. I'll paste my code below as I'm really struggling!

I'm simply trying to print out the text state!

Components/Welcome/index.jsx

import React, { Text, View, StyleSheet } from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';


const Welcome = React.createClass({ //() => (

   constructor() {
        super(props, context);
        console.log("context", this.context);
    }

    render () {
        // state = super(props);
        // console.log(state);
        return (
        <View style={ styles.container }>
            <Text style={ styles.welcome }>
                React Native Redux Starter Kit
            </Text>
            <Text style={ styles.instructions }>
                { this.props.text }
            </Text>
            <Text style={ styles.instructions }>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
            </Text>
        </View>
        )
    }
// );
});

containers/app.jsx:

import React, { Component } from 'react-native';
import { Provider } from 'react-redux';
import configureStore from 'configStore';
import ExNavigator from '@exponent/react-native-navigator';
import routes from 'routes';

export default class App extends Component{



   /**
     * Render
     *
     * @return {jsx} Render <Provider /> component
     */
    render(){
        return (
            <Provider store={ configureStore() }>
                <ExNavigator
                  initialRoute={ routes.getHomeRoute() }
                  style={{ flex: 1 }}
                  sceneStyle={{ paddingTop: 64 }} />
            </Provider>
        );
    }

}

reducers/bar.jsx:

This is setting the state of text = "testssters". I'm trying to print this out in my component.

import Immutable from 'immutable';
import { BAR } from 'constants/ActionTypes';

const initialState = Immutable.fromJS({
    text: "hi"
});

export default function bar(state = {
    text: "testssters",
  }, action) 
{
    switch(action.type) {
        case BAR:
            state = state;
            break;
    }

    return state;
}

routes.jsx:

const routes = {};

    /**
     * Homepage
     *
     */

     // Shows the homepage (Welcome/index.js)
    routes.getHomeRoute = () => ({
        getSceneClass() {
            return require('Welcome/').default;
        },
        getTitle() {
            return 'Welcome';
        }
    });

configStore.jsx:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import * as reducers from 'reducers/';

const createStoreWithMiddleware = compose(
    applyMiddleware(thunk)
    // Add remote-redux-devtools
)(createStore);

export default function configureStore() {
    return createStoreWithMiddleware(combineReducers(reducers));
}

Upvotes: 1

Views: 1239

Answers (1)

Henrik Andersson
Henrik Andersson

Reputation: 47172

React.createClass() expects an object and not a function.

If you're using createClass(), in order to set an initial state use getInitialState.

const Welcome = React.createClass({
    getInitialState: function () {
        return { myState: 1 };
    },
    render: function () {}
});

If you want to use ES6 classes then the same would look like this

class Welcome extends React.Component {
    constructor() {
        super();
        this.state = { myState: 1 };
    }
    render() {

    }
}

Upvotes: 1

Related Questions