如何正确配置 redux-thunk？

Question

我一直在尝试实现一个 ChatApp 以学习 React Native。我正在尝试使用 redux-thunk 以便在 firebase 中注册用户。

我运行遇到的问题是每个人在 examples/explanations 中做事的方式似乎都略有不同。有点困惑。谁能解释我做错了什么？

// 减速器

import * as types from './actionTypes'

const initialState = {
  restoring: false,
  loading: false,
  user: null,
  error: null,
}

const session = (state = initialState, action) => {
  switch(action.type) {
    case types.SESSION_RESTORING:
      return { ...state, restoring: true }
    case types.SESSION_LOADING:
      return { ...state, restoring: false, loading: true, error: null }
    case types.SESSION_SUCCESS:
      return { restoring: false, loading: false, user: action.user, error: null }
    case types.SESSION_ERROR:
      return { restoring: false, loading: false, user: null, error: action.error }
    case types.SESSION_LOGOUT:
      return initialState
    default:
      return state
  }
}

export default session

// 动作

import * as types from './actionTypes'
import firebaseService from '../../services/firebase'

export const signupUser = (email, password) => {
  return (dispatch) => {
    dispatch(sessionLoading())

    firebaseService.auth()
      .createUserWithEmailAndPassword(email, password)
      .catch(
        error => {
          dispatch(sessionError(error.message))
        }
      )

    let unsubscribe = firebaseService.auth()
      .onAuthStateChanged(
        user => {
          if (user) {
            dispatch(sessionSuccess(user))
            unsubscribe()
          }
        }
      )
  }
}

//Actions

const sessionSuccess = (user) => ({
  type: types.SESSION_SUCCESS,
  user
})

const sessionLoading = () => {
  type: types.SESSION_LOADING
}

const sessionError = (error) => {
  type: types.SESSION_ERROR,
  error
}

// 配置商店

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './session'

const configureStore = () => {

  // eslint-disable-next-line no-underscore-dangle
  return createStore(reducer, compose(applyMiddleware(thunk)))
}

export default configureStore

// 创建商店

import React from 'react'
import { Provider } from 'react-redux'
import configureStore from './store'

import Screen from './screens/Authorization'

const store = configureStore()

const App = () =>
  <Provider store={store}>
    <Screen />
  </Provider>


export default App

// MapDispatchToProps

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import SignupComponent from './Component'
import { signupUser } from '../../../store/session/actions'

const SignupContainer = (props) =>
  <SignupComponent signupUser={props.signup}/>

SignupContainer.propTypes = {
  signup: PropTypes.func.isRequired
}

const mapDispatchToProps = {
  signup: signupUser
}

export default connect(null, mapDispatchToProps)(SignupContainer)

我得到的错误是：

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

Answer 1

如果你想像这样使用箭头函数，你需要用括号包裹你的对象：

const sessionLoading = () => ({
  type: types.SESSION_LOADING
})

const sessionError = (error) => ({
  type: types.SESSION_ERROR,
  error
})

如何正确配置 redux-thunk？

How to configure redux-thunk properly?

react-native

redux

redux-thunk