Intégrer redux, react-redux, redux-saga pour l'authentification. (1/2) (#27)

src/configurations/store/configure-store.js

@@ -1,11 +1,19 @@
-import { createStore, applyMiddleware } from "redux";
+import { createStore, compose, applyMiddleware } from "redux";
 import createSagaMiddleware from "redux-saga";
 import rootReducer from "./root-reducer";
 import rootSaga from "./root-saga";
 
+// https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f
+
 const configureStore = () => {
+  const composeEnhancers =
+    // eslint-disable-next-line
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   const sagaMiddleware = createSagaMiddleware();
-  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
+  const store = createStore(
+    rootReducer,
+    composeEnhancers(applyMiddleware(sagaMiddleware))
+  );
   sagaMiddleware.run(rootSaga);
   return store;
 };

src/configurations/store/root-reducer.js

@@ -1,5 +1,7 @@
 import { combineReducers } from "redux";
+import { currentUserReducer as currentUser } from "../../datas/current-user";
+import { usersReducer as users } from "../../datas/users";
 
-const rootReducer = combineReducers({ /* ... */ });
+const rootReducer = combineReducers({ currentUser, users });
 
 export default rootReducer;

src/configurations/store/root-saga.js

@@ -1,5 +1,8 @@
 import { all } from "redux-saga/effects";
+import { signInSaga } from "../../datas/sign-in";
+import { signUpSaga } from "../../datas/sign-up";
+import { usersSaga } from "../../datas/users";
 
-function* rootSaga() { yield all([ /* ... */ ]); }
+function* rootSaga() { yield all([signInSaga, signUpSaga, usersSaga]); }
 
 export default rootSaga;

src/datas/current-user/current-user-reducer.js

@@ -0,0 +1,15 @@
+import _ from "lodash";
+import signInActionsTypes from "../sign-in/sign-in-actions-types";
+
+const initialState = { id: "", token: "", refreshToken: "" };
+
+const currentUserReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case signInActionsTypes.SIGN_IN_SUCCESS:
+      return _.assign({}, state, action.payload);
+    default:
+      return state;
+  }
+};
+
+export default currentUserReducer;

src/datas/current-user/index.js

@@ -0,0 +1,4 @@
+import currentUserReducer from "./current-user-reducer";
+
+// eslint-disable-next-line
+export { currentUserReducer };

src/datas/sign-in/index.js

@@ -0,0 +1,6 @@
+import signInActionsTypes from "./sign-in-actions-types";
+import signInActions from "./sign-in-actions";
+import signInApi from "./sign-in-api";
+import signInSaga from "./sign-in-saga";
+
+export { signInActionsTypes, signInActions, signInApi, signInSaga };

src/datas/sign-in/sign-in-actions-types.js

@@ -0,0 +1,10 @@
+const signInActionsTypes = {
+  SIGN_IN_REQUEST: "SIGN_IN_REQUEST",
+  SIGN_IN_SUCCESS: "SIGN_IN_SUCCESS",
+  SIGN_IN_FAILURE: "SIGN_IN_FAILURE",
+  SIGN_OUT_REQUEST: "SIGN_OUT_REQUEST",
+  SIGN_OUT_SUCCESS: "SIGN_OUT_SUCCESS",
+  SIGN_OUT_FAILURE: "SIGN_OUT_FAILURE"
+};
+
+export default signInActionsTypes;

src/datas/sign-in/sign-in-actions.js

@@ -0,0 +1,32 @@
+import signInActionsTypes from "./sign-in-actions-types";
+
+const signInActions = {
+  signInRequest: payload => ({
+    type: signInActionsTypes.SIGN_IN_REQUEST,
+    payload
+  }),
+  signInSuccess: payload => ({
+    type: signInActionsTypes.SIGN_IN_SUCCESS,
+    payload
+  }),
+  signInFailure: error => ({
+    type: signInActionsTypes.SIGN_IN_FAILURE,
+    payload: error,
+    error: true
+  }),
+  signOutRequest: payload => ({
+    type: signInActionsTypes.SIGN_OUT_REQUEST,
+    payload
+  }),
+  signOutSuccess: () => ({
+    type: signInActionsTypes.SIGN_OUT_SUCCESS,
+    payload: undefined
+  }),
+  signOutFailure: error => ({
+    type: signInActionsTypes.SIGN_OUT_FAILURE,
+    payload: error,
+    error: true
+  })
+};
+
+export default signInActions;

src/datas/sign-in/sign-in-api.js

@@ -0,0 +1,3 @@
+const signInApi = { signIn: () => ({}), signOut: () => ({}) };
+
+export default signInApi;

src/datas/sign-in/sign-in-saga.js

@@ -0,0 +1,31 @@
+import { all, takeLatest, call, put } from "redux-saga/effects";
+import usersActions from "../users/users-actions";
+import signInActionsTypes from "./sign-in-actions-types";
+import signInActions from "./sign-in-actions";
+import signInApi from "./sign-in-api";
+
+function* signInRequestSaga({ payload }) {
+  try {
+    const { id, ...others } = yield call(signInApi.signIn, payload);
+    yield put(usersActions.getUserRequest({ id }));
+    yield put(signInActions.signInSuccess({ id, ...others }));
+  } catch (error) {
+    yield put(signInActions.signInFailure(error));
+  }
+}
+
+function* signOutRequestSaga({ payload }) {
+  try {
+    yield call(signInApi.signOut, payload);
+    yield put(signInActions.signOutSuccess());
+  } catch (error) {
+    yield put(signInActions.signOutFailure(error));
+  }
+}
+
+const signInSaga = all([
+  takeLatest(signInActionsTypes.SIGN_IN_REQUEST, signInRequestSaga),
+  takeLatest(signInActionsTypes.SIGN_OUT_REQUEST, signOutRequestSaga)
+]);
+
+export default signInSaga;

src/datas/sign-up/index.js

@@ -0,0 +1,6 @@
+import signUpActionsTypes from "./sign-up-actions-types";
+import signUpActions from "./sign-up-actions";
+import signUpApi from "./sign-up-api";
+import signUpSaga from "./sign-up-saga";
+
+export { signUpActionsTypes, signUpActions, signUpApi, signUpSaga };

src/datas/sign-up/sign-up-actions-types.js

@@ -0,0 +1,7 @@
+const signUpActionsTypes = {
+  SIGN_UP_REQUEST: "SIGN_UP_REQUEST",
+  SIGN_UP_SUCCESS: "SIGN_UP_SUCCESS",
+  SIGN_UP_FAILURE: "SIGN_UP_FAILURE"
+};
+
+export default signUpActionsTypes;

src/datas/sign-up/sign-up-actions.js

@@ -0,0 +1,19 @@
+import signUpActionsTypes from "./sign-up-actions-types";
+
+const signUpActions = {
+  signUpRequest: payload => ({
+    type: signUpActionsTypes.SIGN_UP_REQUEST,
+    payload
+  }),
+  signUpSuccess: () => ({
+    type: signUpActionsTypes.SIGN_UP_SUCCESS,
+    payload: undefined
+  }),
+  signUpFailure: error => ({
+    type: signUpActionsTypes.SIGN_UP_FAILURE,
+    payload: error,
+    error: true
+  })
+};
+
+export default signUpActions;

src/datas/sign-up/sign-up-api.js

@@ -0,0 +1,3 @@
+const signUpApi = { signUp: () => ({}) };
+
+export default signUpApi;

src/datas/sign-up/sign-up-saga.js

@@ -0,0 +1,21 @@
+import { all, takeLatest, call, put } from "redux-saga/effects";
+import signInActions from "../sign-in/sign-in-actions";
+import signUpActionsTypes from "./sign-up-actions-types";
+import signUpActions from "./sign-up-actions";
+import signUpApi from "./sign-up-api";
+
+function* signUpRequestSaga({ payload }) {
+  try {
+    yield call(signUpApi.signUp, payload);
+    yield put(signInActions.signInRequest(payload));
+    yield put(signUpActions.signUpSuccess());
+  } catch (error) {
+    yield put(signUpActions.signUpFailure(error));
+  }
+}
+
+const signUpSaga = all([
+  takeLatest(signUpActionsTypes.SIGN_UP_REQUEST, signUpRequestSaga)
+]);
+
+export default signUpSaga;

src/datas/users/index.js

@@ -0,0 +1,7 @@
+import usersActionsTypes from "./users-actions-types";
+import usersActions from "./users-actions";
+import usersApi from "./users-api";
+import usersReducer from "./users-reducer";
+import usersSaga from "./users-saga";
+
+export { usersActionsTypes, usersActions, usersApi, usersReducer, usersSaga };

src/datas/users/users-actions-types.js

@@ -0,0 +1,7 @@
+const usersActionsTypes = {
+  GET_USER_REQUEST: "GET_USER_REQUEST",
+  GET_USER_SUCCESS: "GET_USER_SUCCESS",
+  GET_USER_FAILURE: "GET_USER_FAILURE"
+};
+
+export default usersActionsTypes;

src/datas/users/users-actions.js

@@ -0,0 +1,19 @@
+import usersActionsTypes from "./users-actions-types";
+
+const usersActions = {
+  getUserRequest: payload => ({
+    type: usersActionsTypes.GET_USER_REQUEST,
+    payload
+  }),
+  getUserSuccess: payload => ({
+    type: usersActionsTypes.GET_USER_SUCCESS,
+    payload
+  }),
+  getUserFailure: error => ({
+    type: usersActionsTypes.GET_USER_FAILURE,
+    payload: error,
+    error: true
+  })
+};
+
+export default usersActions;

src/datas/users/users-api.js

@@ -0,0 +1,3 @@
+const usersApi = { getUser: () => ({}) };
+
+export default usersApi;

src/datas/users/users-reducer.js

@@ -0,0 +1,18 @@
+import _ from "lodash";
+import usersActionsTypes from "./users-actions-types";
+
+const initialState = { byId: {}, allIds: [] };
+
+const usersReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case usersActionsTypes.GET_USER_SUCCESS:
+      return _.assign({}, state, {
+        byId: _.assign({}, state.byId, { [action.payload.id]: action.payload }),
+        allIds: _.concat([], state.allIds, [action.payload.id])
+      });
+    default:
+      return state;
+  }
+};
+
+export default usersReducer;

src/datas/users/users-saga.js

@@ -0,0 +1,19 @@
+import { all, takeLatest, call, put } from "redux-saga/effects";
+import usersActionsTypes from "./users-actions-types";
+import usersActions from "./users-actions";
+import usersApi from "./users-api";
+
+function* getUsersRequestSaga({ payload }) {
+  try {
+    const respond = yield call(usersApi.getUser, payload);
+    yield put(usersActions.getUserSuccess(respond));
+  } catch (error) {
+    yield put(usersActions.getUserFailure(error));
+  }
+}
+
+const usersSaga = all([
+  takeLatest(usersActionsTypes.GET_USER_REQUEST, getUsersRequestSaga)
+]);
+
+export default usersSaga;

src/root.js

@@ -3,11 +3,11 @@ import { Provider } from "react-redux";
 import { I18nextProvider } from "react-i18next";
 import { ThemeProvider } from "styled-components";
 import App from "./app";
-// import configureStore from "./configurations/store";
+import configureStore from "./configurations/store";
 import configureI18n from "./configurations/internationalisation";
 import configureTheme from "./configurations/theme";
 
-const store = null; // configureStore();
+const store = configureStore();
 const i18n = configureI18n();
 const theme = configureTheme();