如何设置REDX传奇

Question

我想设置REDX传奇，但我不确定是否会导致问题。

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 
    } 
}