returnxのアクションから約束を返す

Question

私はreact-reduxで新しく、既存のサービスへのログインをしている単純なページを持っていました（呼び出しが機能していて、サーバーからデータを取得しています）。コンポーネント内のデータを取得してset cookieを設定し、サーバーから受信したデータに基づいてユーザーをリダイレクトします。 アクションでデータを取得していますが、コンポーネントでは定義されていません。

onSubmit(e) { 
     e.preventDefault(); 
     if (this.isValid()) { 
      this.setState({ errors: {}, isLoading: true }); 
      this.props.actions.loginUser(this.state).then(
       function (res) { 
        this.context.router.push('/'); 
       }, 
       function (err) { 
        this.setState({ errors: err.response.data.errors, isLoading: false }); 
       } 
      ); 
     } 
    } 

アクション機能：

import * as types from './actionTypes'; 
import loginApi from '../api/loginApi'; 

export function loginSuccess(result) { 
    return { type: types.LOGIN_SUCCESS, result }; 
} 

export function loginFailed(result) { 
    return { type: types.LOGIN_FAILURE, result }; 
} 

export function loginUser(data) { 
    return dispatch => { 
     return loginApi.loginUser(data).then(result => { 
      if (result) { 
       if (result.ErrorCode == 0) 
        dispatch(loginSuccess(result)); 
       else 
        dispatch(loginFailed(result)); 
      } 
     }).catch(error => { 
      throw (error); 
     }); 
    }; 
} 

API：

static loginUser(data) { 
    return fetch(API + "/SystemLogin.aspx", 
     { 
     method: 'POST', 
     mode: 'cors', 
     body: JSON.stringify({ 
      User: data.identifier, 
      Password: data.password 
     }) 
     }).then(function (response) { 
     return response.json(); 
     }) 
     .then(function (parsedData) { 
     return parsedData; 
     //resolve(parsedData); 
     }) 
     .catch(error => { 
     return error; 
     }); 
    } 

減速：

はすべて

フォームコンポーネントで機能を提出いただき、ありがとうございます

import * as types from '../actions/actionTypes'; 
import LoginApi from '../api/loginApi'; 
import initialState from './initialState'; 

export default function loginReducer(state = initialState.login, action) { 
    switch (action.type) { 
     case types.LOGIN_SUCCESS: 
     return [...state, Object.assign({}, action.courses)]; 
      //return action.result; 
     case types.LOGIN_FAILURE: 
      return action.result; 
     default: 
      return state; 
    } 
} 

これ以上のコードは必要ですか？

Answer 1

まず問題は、あなたの減速コードです。 それはこのようにする必要があります： -

import * as types from '../actions/actionTypes'; 
import LoginApi from '../api/loginApi'; 
import initialState from './initialState'; 

export default function loginReducer(state = initialState.login, action) { 
    switch (action.type) { 
     case types.LOGIN_SUCCESS: 
     return Object.assign({}, state, { userProfile: action.results }); 
      //return action.result; 
     case types.LOGIN_FAILURE: 
      return action.result; 
     default: 
      return state; 
    } 
} 

第二の問題は、あなたが別のルートをユーザーに送信しようとしている方法です。

onSubmit(e) { 
     e.preventDefault(); 
     if (this.isValid()) { 
      this.setState({ errors: {}, isLoading: true }); 
      this.props.actions.loginUser(this.state); 
     } 
    } 

次の問題は、function.Inside機能をレンダリングレンダリングのためにチェックを入れて内側にある、あなたの this.props.userProfileオブジェクトが定義されていないか、それがどのある場合される - ： それはこのようにする必要があります唯一あなたがそれをチェックすることができ

this.context.router.push("/homepage");

Answer 2

コンポーネントが動作している可能性がありますが、上記のすべてを行うことは面倒です。コンポーネントとアクション内に「汚れた」非同期コードが混在しているため、この方法では簡単に理解できません。

redux-sagaを使用して、副作用をコンポーネントとアクションから分離することをお勧めします。

A good starting point here.

ステップ1：火作用

ステップ2：

import { put, takeEvery, all } from 'redux-saga/effects' 

// Our worker Saga: will perform the async increment task 
export function* loginUserAsync() { 
    yield put({ type: 'LOGIN_SUCCESS' }) 
} 

// Our watcher Saga: spawn a new loginUserAsync task on each LOGIN_USER 
export function* watchIncrementAsync() { 
    yield takeEvery('LOGIN_USER', loginUserAsync) 
} 

ステップ3：代わり減速の "佐賀" の内部アクションを捕捉した後に新しいアクションを発火非同期コードが実行され、状態を更新するためにレデューサー内でキャッチされます。

ステップ4：あなたはより多くの「汚い」のコードを持っている場合は、単にサガ内でそれを実行（例えばリダイレクト）

Answer 3

を使用して/ホームページルートに彼/彼女をリダイレクトした後、ログイン成功に起こるのだろう、あなたはReduxのでフォームのコンポーネントを接続したのですか？はいの場合、this.props.actions.loginUserの代わりにthis.propsを使用してアクションに直接アクセスする必要があります。私はあなたのフォームコンポーネントの完全なコードを探すチャンスがなかったので、これは問題ではないかもしれません。

これが役に立ちます。