Wie setze ich redux saga

Question

Ich versuche Redux-Saga einzurichten, aber ich bin mir nicht sicher, ob das das Problem verursacht.

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

Es ist ein gemeinsamer Fehler, aber ich kann das nicht herausfinden. Ich habe Beispiele von Redux und Redux-Saga zum Setup-Code verwendet.

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

Das Problem genau in Fehlermeldung beschrieben wird, Ihre Aktionen müssen seien Sie einfache Objekte. Das bedeutet, dass Ihre Ersteller von Aktionen einfache Objekte zurückgeben müssen, z. B.

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