使用 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:

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

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() {

    }
}

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

Problems accessing state in React-native with redux app

reactjs

react-native

redux

redux-thunk

Components/Welcome/index.jsx

containers/app.jsx:

reducers/bar.jsx:

routes.jsx:

configStore.jsx: