Reactjs / Redux - 存储表单提交中的数据

Question

我是redux和redux-form的新手。在通过验证之后，表单会像下面一样提交 - 但是在这一步我希望将用户登录响应存储到redux以控制应用程序工作流的其余部分 -

 submit (values) {
    // creating the body of the request

    //console.log('values', values)

    const body = {
      request: {
        email: values.email,
        password: values.password
      }
    }

    const initialUser = { name: '' };
    const loggedin = false;


    // sending the object to the backend api
    fetch('/test-api/loginuser', {
      method: 'POST',
      mode: 'no-cors',
      header: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    }).then(function (response) {
      console.log('Response from fetch:', response)

      initialUser = response.user
      loggedin = true;

    }).catch(function (err) {
      console.log('An error has occurred -', err)
    })
    // setting the redux store to show the thank you page)
    // new code to store redux state with login authentication details?




    const store = createStore(combineForms({
      user: initialUser, //obj with ALL user data coming back from the response
      loggedin: loggedin, // true if logged in success -- this will control header menu appearance and redirection handling -- I want to store the "authentication session"
    }));

  }

处理此问题的最佳方式是什么？

我可以创建类似以下内容的

状态文件夹 - 告诉我这是否必要或为什么等等。

//状态/ actions.js

export const SET_USER = 'SET_USER '
export const GET_USER_DATA = 'GET_USER_DATA '

//状态/ actionCreators.js

import { SET_LANGUAGE, GET_LANG_DATA } from './actions'

export function setUser (user) {
  return { type: SET_USER , user}
}

export function getUserData (userData) {
  return { type: GET_USER_DATA , userData }
}

//状态/ reducers.js

import { SET_USER , GET_USER_DATA } from './actions'

const DEFAULT_STATE = {
  user: '',
  userData: {}
}

const getUserData = (state, action) => {
  const newState = {}
  Object.assign(newState, state, {userData: action.userData})
  return newState
}

const setUser = (state, action) => {
  const newState = {}
  Object.assign(newState, state, {user: action.user})
  return newState
}

const rootReducer = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    case SET_USER :
      return setUser (state, action)
    case GET_USER_DATA :
      return getUserData(state, action)
    default:
      return state
  }
}

export default rootReducer

//状态/ store.js

import { createStore, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const store = createStore(rootReducer, compose(
  applyMiddleware(thunk),
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
))

export default store

现在我目前有一个reducer文件夹 - 它目前看起来像这样。

//减速器/ rootReducer.js

import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  form: formReducer,
})

export default rootReducer

现在 - 这只是一般形式 - 我是否制作了一个表单：formReducer用于不同的表单？ form：loginFormReduder - form：registerFormReducer - form：forgotPasswordReducer

- 这是我应该修改以处理存储用户详细信息的地方吗？

import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import isLoggedIn from './reducer_loggedIn'
import userData from './reducer_userData'

const rootReducer = combineReducers({
  userData: userData,
  isLoggedIn: isLoggedIn,
  form: formReducer
})

export default rootReducer

=============

//动作/ action_isLoggedIn

export const ISLOGGEDIN = 'ISLOGGEDIN '

export function isLoggedIn (isLoggedIn) {
  // isLoggedIn is an ActionCreator that needs to return an action
  // an object with a type property
  return {
    type: ISLOGGEDIN ,
    payload: isLoggedIn 
  }
}

//减速器/ reducer_loggedIn

import { ISLOGGEDIN } from '../actions/action_isLoggedIn'

export function isLoggedIn (state = null, action) {
  switch (action.type) {
    case ISLOGGEDIN :
      return action.payload
  }
  return state
}

=================然后一个用于userData？

//动作/ action_userData

export const USERDATA = 'USERDATA'

export function userData (userData) {
  // userData is an ActionCreator that needs to return an action
  // an object with a type property
  return {
    type: USERDATA ,
    payload: userData
  }
}

//减速器/ reducer_userData

import { USERDATA } from '../actions/action_userData'

export function userData (state = null, action) {
  switch (action.type) {
    case USERDATA :
      return action.payload
  }
  return state
}