How to configure redux-thunk properly? - react-native

Question

I've been trying to implement a ChatApp in order to learn React Native. I'm trying to use redux-thunk in order to sign users up in firebase.
The problem I'm running into is that everyone seems to do things slightly different in their examples/explanations. Little confused. Can anyone explain what I'm doing wrong?
// Reducer
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
// Actions
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
}
// Configure store
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
// Create store
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)
The error I get is:
Actions must be plain objects. Use custom middleware for async actions.

Answer 1

You need to wrap your object in parens if you want to use arrow functions like that:
const sessionLoading = () => ({
type: types.SESSION_LOADING
})
const sessionError = (error) => ({
type: types.SESSION_ERROR,
error
})