CODEWITHSUNDEEP
react-nativereduxredux-thunk
Aryella Lacerda
Aryella Lacerda

Reputation: 29

How to configure redux-thunk properly?

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.

Upvotes: 1

Views: 321

Answers (1)

Matt Aft
Matt Aft

Reputation: 8936

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

Upvotes: 1

Related Questions