Reactjs/Redux — storing data from a form submissio

问题:

I am very new to redux and redux-form. After passing validation the form gets submitted like the following -- but at this step I want to stash the user login response to the redux to control the rest of the application workflow --

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

  }

---

what is the best way of handling this?

do I create something like the following

A state folder - and tell me if this is necessary or why etc..

//state/actions.js

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

//state/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 }
}

//state/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

//state/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

now I currently have a reducer folder -- and it currently looks like this.

//reducers/rootReducer.js

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

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

export default rootReducer

now -- this is just for a general form -- do I make a form: formReducer for DIFFERENT forms? form: loginFormReduder -- form: registerFormReducer -- form: forgotPasswordReducer

-- is this where I should modify to handle stashing user details?

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

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

//actions/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 
  }
}

//reducers/reducer_loggedIn

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

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

================= then one for the userData?

//actions/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
  }
}

//reducers/reducer_userData

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

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