6

私はreduxに反応するのが初めてです。Redux Saga を試してみたところ、理解できないエラー メッセージが表示されました。これは私の rootSaga です:

import { takeEvery } from 'redux-saga';
import { AUTH_LOAD_SUCCESS,AUTH_SIGNUP,AUTH_SIGNIN,AUTH_SIGNOUT } from '../reducers/auth';
import { receiveAuth,signUp,signIn,onSignOut } from './auth';

export default function* rootSaga(){
    yield [
        takeEvery('AUTH_LOAD_SUCCESS', receiveAuth),
        takeEvery('AUTH_SIGNUP', signUp),
        takeEvery('AUTH_SIGNOUT',onSignOut),
        takeEvery('AUTH_SIGNIN', signIn)          
]

}

サインインとサインアップは完全に機能しますが、その後、コンソールに次のエラー メッセージが表示されます。したがって、redux-saga を使用してログインすることはできますが、エラー メッセージに従ってサガが「キャンセル」されたため、SignOut を機能させることができません。誰かが私に何が起こっているのか説明してもらえますか? ありがとう

bundle.js:79457 uncaught at check call: argument fn is undefinedlog @ bundle.js:79457
bundle.js:79457 rootSaga has been cancelled 
bundle.js:79457 uncaught at rootSaga 
 at rootSaga 
 at signIn 
 Error: call: argument fn is undefined
    at check (http://127.0.0.1:3000/dist/bundle.js:79313:12)
    at getFnCallDesc (http://127.0.0.1:3000/dist/bundle.js:80311:21)
    at call (http://127.0.0.1:3000/dist/bundle.js:80336:24)
    at signIn$ (http://127.0.0.1:3000/dist/bundle.js:81213:47)
    at tryCatch (http://127.0.0.1:3000/dist/bundle.js:7893:41)
    at GeneratorFunctionPrototype.invoke [as _invoke] (http://127.0.0.1:3000/dist/bundle.js:8167:23)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (http://127.0.0.1:3000/dist/bundle.js:7926:22)
    at next (http://127.0.0.1:3000/dist/bundle.js:79727:28)
    at currCb (http://127.0.0.1:3000/dist/bundle.js:79801:8)
    at http://127.0.0.1:3000/dist/bundle.js:79904:17

追加情報:

sagas/auth.js
import 'babel-polyfill';
import fetch from 'isomorphic-fetch'
import { browserHistory } from 'react-router';
import cookie from 'react-cookie';
import { put,call,select } from 'redux-saga/effects';
import { requestSignUp,requestSignIn,requestSignOut,receiveUser,receiveSignIn,receiveSignOut } from '../reducers/auth'



export function* onSignOut(){

/////////////////ignore this for the moment///////
 console.log("ffss")

}

export function* receiveAuth() {
    const user = cookie.load('username');

    yield put(receiveAuth(user));
    }

export function* signUp(action) {
    yield put(requestSignUp())
    try {
        const response = yield call(fetch,'/api/sign_up', {
                    method:'POST',
                    headers:{'Accept': 'application/json', 'Content-Type': 'application/json'},
                    body: JSON.stringify(action.payload)  /////action.payload contains {username:'aa',password:'aa'}
                    })
        if(response.ok){
            yield call(cookie.save,'username', action.payload.username)
            yield put(receiveUser(action.payload.username))
            yield call(browserHistory.push('/chat'))
        }
    } catch (err){
        throw err
      }       
}

export function* signIn(action) { console.log("hi")
    yield put(requestSignIn())
    try {

        const response = yield call(fetch,'/api/sign_in', {
                method:'POST',
                headers:{'Accept': 'application/json', 'Content-Type': 'application/json'},
                body: JSON.stringify(action.payload)  /////action.payload contains {username:'aa',password:'aa'}
                })


        if(response.ok){
             yield call(cookie.save,'username',action.payload.username)
            yield put(receiveSignIn(action.payload))
            yield call(browserHistory.push('/chat'))
        }
    } catch (err){
        throw err
      }
}

私は呼び出すために2番目の引数を入れることが期待されていると思いますが、nullをコーディングしたとき、つまりyield call(browserHistory.push('/chat'),null)まだエラーが発生します

uncaught at signIn call: argument fn is undefined
uncaught at check call: argument fn is undefined

また、私の receiveAuth はこのメッセージを返しています:

uncaught at rootSaga 
 at rootSaga 
 at receiveAuth 
 Error: Actions must be plain objects. Use custom middleware for async actions.
4

1 に答える 1

17

エラーは、サガyield call(somefunc, ...)内にあることが原因です。signIn(コード内の名前がsomeFunc何であれ) は未定義です。そのため、関数名のつづりを間違えていないか、定義モジュールからエクスポートするために省略しているかどうかを確認する必要があります

編集

このように browserHistory.push 関数を呼び出していることに気付きました

yield call(browserHistory.push('/chat'),null)

関数を自分で呼び出すのではなく、引数 (および最終的には this コンテキスト) と共に関数自体をサガに提供する必要があります。

yield apply(browserHistory, browserHistory.push, ['/chat'])

コンテキストを使用してメソッドを呼び出すことができるapply Effectを使用していthisます (コンテキストは第 1 引数として提供されます)。

于 2016-08-27T19:50:52.913 に答える