15

redux、react-redux、redux-formに頭を悩ませようとしています。

ストアをセットアップし、redux-form からレデューサーを追加しました。私のフォームコンポーネントは次のようになります:

ログインフォーム

import React, {Component, PropTypes} from 'react'
import { reduxForm } from 'redux-form'
import { login } from '../../actions/authActions'

const fields = ['username', 'password'];

class LoginForm extends Component {
    onSubmit (formData, dispatch) {
        dispatch(login(formData))
    }

    render() {
        const {
            fields: { username, password },
            handleSubmit,
            submitting
            } = this.props;

        return (
            <form onSubmit={handleSubmit(this.onSubmit)}>
                <input type="username" placeholder="Username / Email address" {...username} />
                <input type="password" placeholder="Password" {...password} />
                <input type="submit" disabled={submitting} value="Login" />
            </form>
        )
    }
}
LoginForm.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired
}

export default reduxForm({
    form: 'login',
    fields
})(LoginForm)

これは期待どおりに機能します。redux DevToolsでは、フォーム入力時にストアがどのように更新され、loginアクション作成者がログイン アクションをディスパッチするフォームを送信するかを確認できます。

Redux-thunkミドルウェアをストアに追加し、Async Actions の redux ドキュメントで説明されているように、ログイン用のアクション クリエーターをセットアップしました。

authActions.js

import ApiClient from '../apiClient'

const apiClient = new ApiClient()

export const LOGIN_REQUEST = 'LOGIN_REQUEST'
function requestLogin(credentials) {
    return {
        type: LOGIN_REQUEST,
        credentials
    }
}

export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
function loginSuccess(authToken) {
    return {
        type: LOGIN_SUCCESS,
        authToken
    }
}

export const LOGIN_FAILURE = 'LOGIN_FAILURE'
function loginFailure(error) {
    return {
        type: LOGIN_FAILURE,
        error
    }
}

// thunk action creator returns a function
export function login(credentials) {
    return dispatch => {
        // update app state: requesting login
        dispatch(requestLogin(credentials))

        // try to log in
        apiClient.login(credentials)
            .then(authToken => dispatch(loginSuccess(authToken)))
            .catch(error => dispatch(loginFailure(error)))
    }
}

繰り返しますが、redux DevTools では、これが期待どおりに機能することがわかります。LoginFormでdispatch(login(formData))が呼び出されるとonSubmit、最初にLOGIN_REQUESTアクションがディスパッチされ、その後にLOGIN_SUCCESSorが続きLOGIN_FAILUREます。ストアにプロパティを追加LOGIN_REQUESTし、このプロパティを削除します。(これがreselectを使用する何かになる可能性があることはわかっていますが、今のところは単純に保ちたいと思います。state.auth.pending = trueLOGIN_SUCCESSLOGIN_FAILURE

さて、redux-form docs でonSubmit、フォームの状態を更新する約束を返すことができることを読みました（submitting、error）。しかし、これを行う正しい方法が何であるかはわかりません。dispatch(login(formData))戻りますundefined。

state.auth.pendingストア内のフラグを、request、success、failurestate.auth.statusの値などの変数と交換できます(これには、おそらく reselect などを使用できます)。

次に、ストアをサブスクライブして、次のようonSubmitに変更を処理できます。state.auth.status

// ...

class LoginForm extends Component {
    constructor (props) {
        super(props)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onSubmit (formData, dispatch) {
        const { store } = this.context
        return new Promise((resolve, reject) => {
            const unsubscribe = store.subscribe(() => {
                const state = store.getState()
                const status = state.auth.status

                if (status === 'success' || status === 'failure') {
                    unsubscribe()
                    status === 'success' ? resolve() : reject(state.auth.error)
                }
            })
            dispatch(login(formData))
        }).bind(this)
    }

    // ...
}
// ...
LoginForm.contextTypes = {
    store: PropTypes.object.isRequired
}

// ...

ただし、このソリューションは気分が悪く、アプリが成長し、他のソースからより多くのアクションがディスパッチされる可能性がある場合に、常に期待どおりに機能するかどうかはわかりません.

私が見た別の解決策は、api 呼び出し (promise を返す) を に移動することですonSubmitが、React コンポーネントから分離したままにしたいと思います。

これに関するアドバイスはありますか？

4

1 に答える 1