Функция React native connect не передает действие дочернему компоненту через реквизиты

Я только знакомлюсь с redux и читал, что я должен передать создателей действий через родительский элемент приложения, а также через mapStateToProps, mapDispatchToProps и функцию подключения, я должен иметь возможность передавать действия. Однако, когда я вызываю дочерний компонент this.props. функция не существует, поэтому кажется, что она не передается должным образом.

Буду очень признателен за помощь.

Примечание: я упустил некоторые вещи, такие как импорт и редуктор, чтобы быть более кратким.

login.js:

export function login(token, id) {
  console.log('login action');
  return {
    type: 'LOG_IN',
    token,
    id,
  };
}

index.ios.js:

import * as actionCreators from './actions/login'

const store = createStore(RootReducer, undefined, autoRehydrate());
persistStore(store);

class App extends Component {
  constructor(props) {
    super(props);
    state = {
      token: '',
      id: '',
      store: store,
    };
  }

  render() {    
    return (

    <Provider store={ state.store }>
      <View style = {styles.container}>
        <LoginView/>
      </View>
    </Provider>
    );
  }
}

AppRegistry.registerComponent('App', () => App); 

function mapStateToProps(state) {
  return {
    token: state.token,
    id: state.id
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({actionCreators}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

loginView.js:

export class LoginView extends View {

  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    console.log(props);
    super(props)
    this.state = {
      user: '',
      token: '',
      id: '',
    }
    this.onLogin = this.onLogin.bind(this);
  }

  onLogin() {
    console.log("on login1");
    this.props.login({token: this.state.token, id: this.state.id});
    console.log("on login");
  }

И в основном происходит следующее: когда функция onLogin () вызывается непосредственно выше, она заявляет, что this.props.login не является функцией. В чем причина этого и как я могу это исправить?


react-native reactjs javascript redux react-redux
person jkurs    schedule 10.11.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы подключаете компонент App, поэтому у него будет this.props.onLogin(). Однако вы не передаете onLogin в качестве опоры для <LoginView />. Вам нужно либо отобразить <LoginView onLogin={this.props.onLogin} />, либо также подключить LoginView и включить onLogin как часть соединения этого компонента.

person markerikson    schedule 10.11.2016
comment
Спасибо за ответ. Я использовал это руководство для своей реализации: medium.com/@MKulinski/ Это звучало так, будто мне не нужно передавать его в качестве опоры для компонента, как вы заявили. Разве это не так? - person jkurs; 11.11.2016
comment
Да, в статье плохая формулировка. Компонент React не получает свойств волшебным образом - их нужно откуда-то передавать. connect генерирует компонент-оболочку, который передает свойства данных и свойства функций вашему реальному компоненту. Так что да, либо явно передайте onLogin метод от App к LoginView, либо подключите LoginView напрямую и передайте ему onLogin в mapDispatch. - person markerikson; 11.11.2016
comment
Кроме того, к вашему сведению, у меня есть большой список ссылок на высококачественные руководства и статьи по React, Redux и связанным темам на github.com/markerikson/react-redux-links. Оттуда много хорошей информации и примеров. - person markerikson; 11.11.2016
comment
Большое спасибо за помощь и ресурсы! Я уверен, что пригодится. - person jkurs; 11.11.2016

arrow_upward
2
arrow_downward

Эта строка:

return bindActionCreators({actionCreators}, dispatch);

должно быть:

return bindActionCreators(actionCreators, dispatch);

actionCreators уже является объектом. Если передать его в другой набор фигурных скобок, он интерпретируется как синтаксис сокращенных имен свойств ES6. На самом деле вы передаете новый объект, который выглядит так:

{
  actionCreators: {
    login: ... // your action is buried here
  }
}

// ^^ which would get mapped to this.props.actionsCreators.login (wrong)
person Jeff McCloud    schedule 10.11.2016
comment
Спасибо за ответ. К сожалению, это не устранило ошибку. Есть ли у вас другие предложения? - person jkurs; 11.11.2016

arrow_upward
0
arrow_downward

кажется, что redux подключается в реакции на состояние привязки в компонентах, которые в эти дни используют

import {connect} from "react-redux";
...
class HomeScreen extends React.Component { 
// do your things.. 
constructor(props) {
  super(props);
  console.log(this.props);
  }
  render () {
....
  }
}

const mapStateToProps = state => {
 return { user: state.user };
 };
 export default connect(mapStateToProps)(HomeScreen);
person taggartJ    schedule 04.05.2018