ネイティブ・コネクト機能が小道具を介して子コンポーネントにアクションを渡さない

Question

私はちょうど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は関数ではないことを示します。これの理由は何ですか？どうすれば修正できますか？

Answer 1

あなたはAppコンポーネントを接続していますので、this.props.onLogin()になります。しかし、onLoginを小道具として<LoginView />に渡すことはありません。 <LoginView onLogin={this.props.onLogin} />をレンダリングするか、LoginViewにも接続し、そのコンポーネントの接続の一部としてonLoginを含める必要があります。

Answer 2

このライン：

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)