authentication - localstorage - Store Credentials en la tienda Redux es una buena práctica?

react router redux login

Question

Intento desarrollar una aplicación React / Redux para fines de aprendizaje y me pregunto si lo que he hecho hasta ahora es una buena práctica o no es recomendable. Lo primero que tuve que hacer fue manejar las solicitudes autorizadas. Tengo un restfull api Rails back end. Este servidor responde a la solicitud de inicio de sesión que se agrega en los parámetros de los encabezados, como access-token. Este token de acceso es válido solo para la próxima solicitud, que a su vez, devuelve un token nuevo válido para el siguiente y así sucesivamente.

Implementé este flujo de esta manera: la tienda despacha la acción que realiza la solicitud de inicio de sesión pasando el nombre de usuario y la contraseña. Luego, cuando la respuesta está lista, guardo las credenciales en la tienda redux. Cuando necesito realizar una solicitud autorizada, configuro esos parámetros en la solicitud del encabezado. Cuando recibo la respuesta, actualizo las credenciales en la tienda con las nuevas que recibo de la respuesta.

Aquí mi código para más claridad:

import { combineReducers } from ''redux''
import { createStore, applyMiddleware } from ''redux'';
import thunk from ''redux-thunk'';

const initialState = {
  currentUser: {
    credentials: {},
    user: {}
  },
  test: {},
  users: []
}

export const SUBMIT_LOGIN = ''SUBMIT_LOGIN''
export const SET_USER = ''SET_USER''
export const TEST = ''TEST''
export const SET_USERS = ''SET_USERS''
export const SET_CREDENTIALS = ''SET_CREDENTIALS''

//actions
const submitLogin = () => (dispatch) => {
  return postLoginRequest()
    .then(response => {
      dispatch(setCredentials(
        response.headers.get(''access-token''),
        response.headers.get(''client''),
        response.headers.get(''expiry''),
        response.headers.get(''token-type''),
        response.headers.get(''uid'')
      ));
      return response
    })
    .then(response => {
      return response.json();
    })
    .then(
      (user) => dispatch(setUser(user.data)),
    );
}

const performRequest = (api) => (dispatch) => {
  return api()
    .then(response => {
      dispatch(setCredentials(
        response.headers.get(''access-token''),
        response.headers.get(''client''),
        response.headers.get(''expiry''),
        response.headers.get(''token-type''),
        response.headers.get(''uid'')
      ));
      return response
    })
    .then(response => {return response.json()})
    .then(json => {console.log(json)})
}

const setUsers = (users) => {
  return {
    type: SET_USERS,
    users
  }
}

const setUser = (user) => {
  return {
    type: SET_USER,
    user
  }
}

const setCredentials = (
  access_token,
  client,
  expiry,
  token_type,
  uid
) => {
  return {
    type: SET_CREDENTIALS,
    credentials: {
      ''access-token'': access_token,
      client,
      expiry,
      ''token-type'': token_type,
      uid
    }
  }
}

const currentUserInitialState = {
  credentials: {},
  user: {}
}

const currentUser = (state = currentUserInitialState, action) => {
  switch (action.type) {
    case SET_USER:
      return Object.assign({}, state, {user: action.user})
    case SET_CREDENTIALS:
      return Object.assign({}, state, {credentials: action.credentials})
    default:
      return state
  }
}

const rootReducer = combineReducers({
  currentUser,
  test
})

const getAuthorizedHeader = (store) => {
  const credentials = store.getState().currentUser.credentials
  const headers = new Headers(credentials)
  return headers
}

//store creation

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

const postLoginRequest = () => {
  return fetch(''http://localhost:3000/auth/sign_in'', {
    method: ''POST'',
    headers: {
      ''Content-Type'': ''application/json''
    },
    body: JSON.stringify({
      email: ''[email protected]'',
      password: ''password'',
    })
  })
}

const getUsers = () => {
  const autorizedHeader = getAuthorizedHeader(store)
  debugger
  return fetch(''http://localhost:3000/users'',
    {
      method: ''GET'',
      headers : autorizedHeader
    }
  )
}


store.dispatch(submitLogin())

setTimeout(() => {
  console.log(store.dispatch(performRequest(getUsers)))
}, 2000)

Me pregunto si almacenar datos razonables en la tienda en una buena práctica y si no estoy abierto a cualquier sugerencia para desarrollar este flujo de trabajo de una mejor manera.

También tengo este parámetro en mi servidor

config.batch_request_buffer_throttle = 5.seconds

Algunas veces es necesario hacer varias solicitudes a la API al mismo tiempo. En este caso, cada solicitud en el lote deberá compartir el mismo token de autenticación. Esta configuración determina qué tan lejos pueden estar las solicitudes mientras se sigue usando el mismo token de autenticación.

De esta forma, no pude despachar la acción setCredentials en mi función performRequest si el token sigue siendo válido, pero realmente no tengo idea de cómo verificarlo.

Gracias