使用 redux 应用程序在 React-native 中访问状态时出现问题

Question

所以我是Redux新手，并且在访问STATE时遇到问题。当我将constructor()方法添加到Component (Welcome)时，出现Cannot find module /Welcome错误。我将在下面粘贴我的代码，因为我真的很挣扎！

我只是想打印出文本状态！

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：

这是设置文本 = "测试者"的状态。我正在尝试在我的组件中打印出来。

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));
}

Answer 1

React.createClass()需要一个对象而不是一个函数。

如果您使用的是createClass() ，为了设置初始状态，请使用 getInitialState 。

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

如果你想使用 ES6 类，那么同样看起来像这样

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