ReactネイティブRecomposeアクションがレデューサーをトリガーしない

Question

私はリアクションネイティブのユーザーログイン画面を別のアクションとレデューサーファイルを使ってRecomposeを使って設定していますが、私のレデューサーは決して呼び出されません。現在、doUserLogin()再構成ハンドラをトリガーするだけで、ログインボタンがあります：

userActions.js：

を順番に

loginScreen.js

import React from 'react'; 
import { Button, Text, View } from 'react-native'; 
import { connect } from 'react-redux'; 
import { withHandlers, compose } from 'recompose'; 
import { loginUser } from './user/userActions'; 

const LoginScreen = ({ user, doUserLogin }) => { 
    return (
    <View style={styles.loginContainer}> 
     {user ? <Text>Hi, {user.name}!</Text> : <Text>NOT Logged in!</Text>} 
     <Button title="Log In" onPress={doUserLogin} /> 
    </View> 
); 
}; 

export default compose(
    connect((state, props) => ({ 
    ...state.user, 
    })), 
    withHandlers({ 
    doUserLogin: props => 
     (event) => { 
     console.log('LOGIN USER IN HANDLER'); // <-- THIS IS WORKING 
     loginUser(); 
     }, 
    }), 
)(LoginScreen); 

doUserLogin()ハンドラは、自分の行動でloginUser()は、ファイルを呼び出します

import { LOGIN_REQUEST } from './actionTypes'; 

export const loginUser =() => { 
    return (dispatch) => { 
    console.log('In action'); // <-- THIS IS WORKING 
    dispatch({ type: LOGIN_REQUEST }); 
    }; 
}; 

これまでのところ、とても良いです。しかし、私がdispatch()になると、私のレデューサーは決して呼び出されません。しかし、減速はは（など、ナビゲーションから）他のアクションを拾っている - それは単に上loginUser()からアクションを受信して​​いません。

userReducer.js：

import { LOGIN_REQUEST } from './actionTypes'; 

const userReducer = (state = initialState, action) => { 
    console.log('In reducer'); <-- ** THIS IS NEVER CALLED ** 

    switch (action.type) { 
    case LOGIN_REQUEST: 
     return Object.assign({}, state, { 
     isFetching: true, 
     }); 
    case LOGOUT: 
     return initialState; 
    default: 
     return state; 
    } 
}; 
export default userReducer; 

任意の提案を大幅になります感謝。

Answer 1

これはわかりました。一言で言えば、loginScreen.jsには、とmapDispatchToProps関数を追加する必要がありました。これはconnectに渡されます。 withHandlersは、dispatchloginUser()の機能を自分のアクションファイル内の小道具として使用できます。

は、任意の追加アドバイス/提案はまだいただければ幸いですloginScreen.js

import React from 'react'; 
import { Button, Text, View } from 'react-native'; 
import { connect } from 'react-redux'; 
import { withHandlers, compose } from 'recompose'; 
import { loginUser } from './user/userActions'; 

const LoginScreen = ({ user, doUserLogin }) => { 
    return (
    <View style={styles.loginContainer}> 
     {user ? <Text>Hi, {user.name}!</Text> : <Text>NOT Logged in!</Text>} 
     <Button title="Log In" onPress={doUserLogin} /> 
    </View> 
); 
}; 

const mapStateToProps = state => ({ 
    ...state.user, 
}); 

const mapDispatchToProps = dispatch => ({ 
    loginUser:() => { 
    dispatch(loginUser()); 
    }, 
}); 

export default compose(
    connect(mapStateToProps, mapDispatchToProps), 
    withHandlers({ 
    doUserLogin: props => 
    () => { 
     console.log('LOGIN USER IN HANDLER'); 
     props.loginUser(); 
     }, 
    }), 
)(LoginScreen); 

を更新しました。

Answer 2

実際、この特定のケースでは、完全にHandlersヘルパーを閉じることができます。

アクション作成者をリアクションリミックス接続関数に渡すだけで、ディスパッチ関数にバインドすることができます（図のように）。さらに、connectドキュメントをチェックしてください。 connectの3番目のパラメータでコンポーネントの小道具にアクセスし、さらに小道具に依存するハンドラを作成できます。

それは我々がwithHandlerヘルパー