reduxのサガをセットアップする方法

Question

私はredux-sagaをセットアップしようとしていますが、問題が原因であるかどうかはわかりません。

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

これは一般的なエラーですが、わかりません。私はreduxとredux-sagaの例を使ってコードをセットアップしました。

class Login extends Component { 
    static propTypes = { 
    isAuthenticated: PropTypes.bool, 
    loginRequest: PropTypes.func 
    } 

    _onSubmit =() => { 
    const {userName, password} = this.state 

    const credentials = { userName, password } 
    this.props.loginRequest(credentials) 
    } 
} 

const mapStateToProps = state => ({ 
    isAuthenticating: state.login.isAuthenticating 
}) 

const mapDispatchToProps = dispatch => bindActionCreators({ 
    loginRequest 
}, dispatch) 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Login) 

./action

export const loginRequest = credentials => { 
    return dispatch => { 
    dispatch({ 
     type: types.LOGIN_REQUEST, 
     credentials 
    }) 
    } 
} 

./store

export const history = createHistory() 
const sagaMiddleware = createSagaMiddleware() 

const initialState = {} 
const enhancers = [] 
const middleware = [ 
    sagaMiddleware, 
    routerMiddleware(history) 
] 

const composedEnhancers = compose(
    applyMiddleware(...middleware), 
    ...enhancers 
) 

const store = createStore(
    rootReducer, 
    initialState, 
    composedEnhancers 
) 

sagaMiddleware.run(loginSaga) 

export default store 

./saga

問題は正確に、エラーメッセージに記述されて

function postLogin (credentials) { 
    credentials.grant_type = 'password' 
    const payload = { 
    method: 'post', 
    headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
    }, 
    data: encoder(credentials), 
    url: `${config.IDENTITY_URL}/Token` 
    } 

    return axios(payload) 
} 

function * loginRequest (action) { 
    try { 
    const data = yield call(postLogin, action.credentials) 
    yield put({ type: types.LOGIN_SUCCESS, data }) 
    } catch (err) { 
    yield put({ type: types.LOGIN_FAILURE, err }) 
    } 
} 

function * loginSaga() { 
    yield takeLatest('LOGIN_REQUEST', loginRequest) 
} 

export default loginSaga 

Answer 1

、あなたの行動をする必要があります明白なオブジェクトである。つまり、アクションクリエイターは普通のオブジェクトを返さなければなりません。例：

export const loginRequest = credentials => { 
    return { 
    type: types.LOGIN_REQUEST, 
    credentials 
    } 
}