Question

我只是在学习本地反应以及它如何与redux一起使用。我已经设置了一个商店，设置了loginContainer，loginView。这个视图有一个按钮，当它被点击时，我发送一个动作/减速器来改变按钮的文字“登录”。我希望能够深入了解为什么我会看到action / reducer的日志，但是什么都没有发送到loginContainer然后在loginView上重新渲染。

以下是loginView的代码：

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import MainView from '../MainView/mainview';
import loginReducers from '../../reducers';
import { createStore } from 'redux';
import * as loginActions from '../../actions/actions';
import { LOGIN } from '../../actions/actions';
class LoginView extends Component {
    constructor(props)
    {
      super(props);
    }

    render() {
      const {text, _loginPressed} = this.props;
        return (
          <View style={styles.container}>
          <TextInput style={styles.textInput} placeholder={"Username.."}/>
          <TextInput style={styles.textInput} placeholder={"Password.."}/>
          <TouchableHighlight onPress={_loginPressed} style={styles.loginButton} underlayColor={'#2f9bd7'}>
          <Text style={styles.loginButtonText}>{text}</Text>
          </TouchableHighlight>
          </View>
        );
    }
}
export default LoginView;

登录容器：

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import styles from './styles';
import loginReducers from '../../reducers';
import {LOGIN} from '../../actions/actions'
import LoginView from '../../components/Login/loginview';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

export default class LoginContainer extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {text} = this.props;
    console.log(this.state);
    return (
      <LoginView
       text={text}
       _loginPressed={this._loginPressed.bind(this)}/>
    );
  }
}

const stateToProps = (state) => {
  return {
    state: this.state
  }
}

const dispatchToProps = (dispatch) => {
  return {
    _loginPressed: () => {
      dispatch(LOGIN())}
  };
};

export default connect(stateToProps, dispatchToProps)(LoginView)

顶视图（setup.js）：

import App from './components/App';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store';

const store = configureStore();

function setup() {
  class Root extends Component {
    render() {
      return (
        <Provider store={store}>
          <App/>
        </Provider>
      );
    }
  }

  return Root;
}

module.exports = setup;

应用/ index.js

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import LoginContainer from '../../containers/Login/loginContainer';
import configureStore from '../../store';

class App extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{name: 'LoginView', component: LoginContainer}}
          renderScene={(route, navigator) => {
          //creates new element with the component and navigator;]
          if (route.component) {
              return React.createElement(route.component, Object.assign({navigator }, {type: 'LoginView', text: 'Login'}));
              }
            }}
         />
    );
  }
}

export default App;

Answer 1

试

const stateToProps = (state) => {
  return {
    state: state
  }
}

我认为this在该上下文中未定义

更新

LoginContainer有点令人困惑，因为您要导出两个组件：LoginContainer和已连接的LoginView，请尝试以下更改：

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import styles from './styles';
import loginReducers from '../../reducers';
import {LOGIN} from '../../actions/actions'
import LoginView from '../../components/Login/loginview';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

class LoginContainer extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {text} = this.props;
    console.log(this.state);
    return (
      <LoginView
       text={text}
       _loginPressed={this.props._loginPressed}/>
    );
  }
}

const stateToProps = (state) => {
  return {
    state: state
  }
}

const dispatchToProps = (dispatch) => {
  return {
    _loginPressed: () => {
      dispatch(LOGIN())}
  };
};

export default connect(stateToProps, dispatchToProps)(LoginContainer)

react-native / redux发送动作，发送reducer，但UI未更新

1 个答案: