Redux导入副作用返回Reducer返回未定义

Question

我有以下redux模块：

import { Map, fromJS } from 'immutable'
import api from '../lib/api'
import config from '../config/application'
import storage from '../lib/storage'
import { history } from '../lib/create-store'

// Actions
const USER_LOGIN = 'ts/user/USER_LOGIN'
const USER_LOGIN_RESPONSE = 'ts/user/USER_LOGIN_RESPONSE'
const USER_LOGOUT = 'ts/user/USER_LOGOUT'
const CREATE_ACCOUNT_TEAM = 'ts/user/CREATE_ACCOUNT_TEAM'
const CREATE_ACCOUNT_TEAM_RESPONSE = 'ts/user/CREATE_ACCOUNT_TEAM_RESPONSE'
const RECEIVE_ACCESS_TOKEN = 'ts/user/RECEIVE_ACCESS_TOKEN'
const RECEIVE_USER = 'adsdean/user/RECEIVE_USER'

const initialState = Map({
  accessToken: null,
  loginPending: false,
  loginError: false,
  creatingAccountTeam: false,
  creatingAccountTeamSuccess: false,
  creatingAccountTeamError: Map({}),
  profile: Map({
    id: null,
    email: null,
    firstName: null,
    lastName: null,
    company: null,
    mobile: null,
    mobileShare: true,
    dob: null
  })
})

// Reducer
export default function user (state = initialState, action = {}) {
  switch (action.type) {
    case RECEIVE_ACCESS_TOKEN: {
      storage.save('key', action.token)
      api.setAuth(action.token)
      return state.set('accessToken', fromJS(action.token))
    }

    case USER_LOGIN:
      return state.set('loginPending', true)

    case USER_LOGIN_RESPONSE: {
      let nextState = state.set('loginPending', false)

      if (action.status === 'success') {
        nextState = nextState
          .set('loginError', initialState.loginError)
      } else {
        nextState = nextState.set('loginError', action.error)
      }

      return nextState
    }

    case USER_LOGOUT: {
      storage.delete('key')
      api.setAuth(null)
      return state.set('accessToken', null)
    }

    case CREATE_ACCOUNT_TEAM:
      return state.set('creatingAccountTeam', true)

    case CREATE_ACCOUNT_TEAM_RESPONSE: {
      console.log(action)

      let nextState = state.set('creatingAccountTeam', false)

      if (action.status === 'success')
        state.set('creatingAccountTeamSuccess', true)
      else
        nextState = nextState.set('creatingAccountTeamError', fromJS(action.error))

      return nextState
    }

    case RECEIVE_USER:
      return state
        .setIn('profile', 'id', action.payload.id)
        .setIn('profile', 'email', action.payload.email)
        .setIn('profile', 'firstName', action.payload.first_name)
        .setIn('profile', 'lastName', action.payload.last_name)
        .setIn('profile', 'company', action.payload.company)
        .setIn('profile', 'mobile', action.payload.mobile)
        .setIn('profile', 'mobileShare', action.payload.mobile_share)
        .setIn('profile', 'dob', action.payload.dob)
  }

  return state
}

// ==============================
// Action Creators
// ==============================

export const userLoginResponse = (status, error) => ({
  type: USER_LOGIN_RESPONSE,
  status,
  error,
})

export const receiveAccessToken = token => ({
  type: RECEIVE_ACCESS_TOKEN,
  token
})

export const userCreateWithTeamResponse = (status, error) => ({
  type: CREATE_ACCOUNT_TEAM_RESPONSE,
  status,
  error,
})

export const receiveUser = user => ({
  type: RECEIVE_USER,
  payload: user
})

export const getAccessToken = state =>
  state.get('accessToken')

export const isLoggedIn = state =>
  state.get('accessToken')


// ==============================
// SIDE EFFECTS
// ==============================
//
//

export const getUser = () => async dispatch => {

  api.request.get('/user')
    .then(response => {
      dispatch(receiveUser(response.data))
    })
    .catch(error => {
    })
}

export const userLogin = (username, password) => async dispatch => {
  dispatch({ type: USER_LOGIN })

  api.request.post('/oauth/token', {
    username,
    password,
    'grant_type': 'password',
    'client_id': config.clientId,
    'client_secret': config.clientSecret,
  })
  .then(response => {
    console.log(response)
    const { access_token } = response.data
    dispatch(userLoginResponse('success', null))
    dispatch(receiveAccessToken(access_token))
    dispatch(receiveUser(response.data))
    window.gtag('event', 'login')
  })
  .catch(error => {
    console.log(error)
    dispatch(userLoginResponse('error', error))
  })
}

export const userLogout = () => dispatch => {
  dispatch({ type: USER_LOGOUT })
  history.push('/')
  window.gtag('event', 'logout')
  //logFormSubmission('Logout')
}

export const userCreateWithTeam = (form) => async dispatch => {
  dispatch({ type: CREATE_ACCOUNT_TEAM })

  api.request.post('/account/register/team', {
    email: form.email,
    password: form.password,
    'first_name': form.firstName,
    'last_name': form.lastName,
    company: form.company,
    name: form.name,
    location: form.location,
    dob: form.dob,
    mobile: form.mobile,
    'mobile_share': (form.mobileShare === true) ? 1 : 0
  })
  .then(response => {
    console.log(response)
    dispatch(userCreateWithTeamResponse('success', null))
    dispatch(userLogin(form.email, form.password))
    window.gtag('event', 'create account and team')
    window.gtag('set', {'user_id': response.data.id})
  })
  .catch(error => {
    console.log(error.response)
    dispatch(userCreateWithTeamResponse('error', error.response.data))
  })
}

一切都工作正常，直到我添加了名为getUser的副作用函数。一旦我从我的一个组件/容器中执行import { getUser } from '../../modules/user'，我就会被击中

Error: Reducer "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.

一旦我注释掉导入，使用该模块的其他一切继续正常工作。什么是新的副作用，看起来与导致这种情况的其他副作用相同？

我的创建商店代码：

import { createStore, applyMiddleware, compose } from 'redux'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import { combineReducers } from 'redux-immutablejs'
import { fromJS, Map } from 'immutable'
import thunk from 'redux-thunk'
import user from '../modules/user'

const initialState = fromJS({})
const enhancers = []

const middleware = [
  thunk,
  routerMiddleware(history)
]

export const history = createHistory()

const reducer = combineReducers({
  user,
  router: routerReducer,
})

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.devToolsExtension

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)

const store = createStore(
  reducer,
  initialState,
  composedEnhancers
)

export default store

我可以通过将initialState Map直接移动到reducer的默认参数部分来修复错误......似乎在将它放在单独的const中时会产生错误。然而，在引入此功能之前，它已经持续了数周......

e.g

// Reducer
export default function user (state = Map({
  accessToken: null,
  loginPending: false,
  loginError: false,
  creatingAccountTeam: false,
  creatingAccountTeamSuccess: false,
  creatingAccountTeamError: Map({}),
  profile: Map({
    id: null,
    email: null,
    firstName: null,
    lastName: null,
    company: null,
    mobile: null,
    mobileShare: true,
    dob: null
  })
}), action = {}) {

Answer 1

你使用的setIn语法不正确，嵌套路径需要在[]中。

    .setIn(['profile', 'id'], action.payload.id)
    .setIn(['profile', 'email'], action.payload.email)
    .setIn(['profile', 'firstName'], action.payload.first_name)
    .setIn(['profile', 'lastName'], action.payload.last_name)
    .setIn(['profile', 'company'], action.payload.company)
    .setIn(['profile', 'mobile'], action.payload.mobile)
    .setIn(['profile', 'mobileShare'], action.payload.mobile_share)
    .setIn(['profile', 'dob'], action.payload.dob)

检查这个documentation

也在

if (action.status === 'success')
    state.set('creatingAccountTeamSuccess', true) .  // <--

您错过了将此分配给nextState，这可能会导致不一致