Merge a1bb557 into c252e9d

app/containers/App/selectors.js

@@ -6,7 +6,9 @@ import { createSelector } from '@reduxjs/toolkit';
 
 const selectRouter = state => state.router;
 
-const makeSelectLocation = () =>
-  createSelector(selectRouter, routerState => routerState.location);
+const selectLocation = createSelector(
+  [selectRouter],
+  routerState => routerState.location,
+);
 
-export { makeSelectLocation };
+export { selectLocation };

app/containers/App/tests/selectors.test.js

@@ -1,14 +1,13 @@
-import { makeSelectLocation } from '../selectors';
+import { selectLocation } from '../selectors';
 
-describe('makeSelectLocation', () => {
+describe('selectLocation', () => {
   it('should select the location', () => {
-    const locationStateSelector = makeSelectLocation();
     const router = {
       location: { pathname: '/foo' },
     };
     const mockedState = {
       router,
     };
-    expect(locationStateSelector(mockedState)).toEqual(router.location);
+    expect(selectLocation(mockedState)).toEqual(router.location);
   });
 });

app/containers/HomePage/index.js

@@ -8,14 +8,13 @@
 import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { FormattedMessage } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
 import { useSelector, useDispatch } from 'react-redux';
 import { useInjectReducer } from 'redux-injectors';
 
 import {
-  makeSelectRepos,
-  makeSelectLoading,
-  makeSelectError,
+  selectRepos,
+  selectLoading,
+  selectError,
 } from 'containers/ReposManager/selectors';
 import { loadRepos } from 'containers/ReposManager/slice';
 
@@ -29,20 +28,16 @@ import Section from './components/Section';
 
 import messages from './messages';
 import { reducer, changeUsername } from './slice';
-import { makeSelectUsername } from './selectors';
-
-const stateSelector = createStructuredSelector({
-  username: makeSelectUsername(),
-  repos: makeSelectRepos(),
-  loading: makeSelectLoading(),
-  error: makeSelectError(),
-});
+import { selectUsername } from './selectors';
 
 export default function HomePage() {
   useInjectReducer({ key: 'home', reducer });
 
   const dispatch = useDispatch();
-  const { repos, username, loading, error } = useSelector(stateSelector);
+  const username = useSelector(selectUsername);
+  const repos = useSelector(selectRepos);
+  const loading = useSelector(selectLoading);
+  const error = useSelector(selectError);
 
   const onChangeUsername = evt =>
     dispatch(changeUsername({ username: evt.target.value }));

app/containers/HomePage/selectors.js

@@ -7,7 +7,9 @@ import { initialState } from './slice';
 
 const selectHome = state => state.home || initialState;
 
-const makeSelectUsername = () =>
-  createSelector(selectHome, homeState => homeState.username);
+const selectUsername = createSelector(
+  [selectHome],
+  homeState => homeState.username,
+);
 
-export { selectHome, makeSelectUsername };
+export { selectHome, selectUsername };

app/containers/HomePage/tests/selectors.test.js

@@ -1,4 +1,4 @@
-import { selectHome, makeSelectUsername } from '../selectors';
+import { selectHome, selectUsername } from '../selectors';
 import { initialState } from '../slice';
 
 describe('selectHome', () => {
@@ -17,15 +17,14 @@ describe('selectHome', () => {
   });
 });
 
-describe('makeSelectUsername', () => {
-  const usernameSelector = makeSelectUsername();
+describe('selectUsername', () => {
   it('should select the username', () => {
     const username = 'mxstbr';
     const mockedState = {
       home: {
         username,
       },
     };
-    expect(usernameSelector(mockedState)).toEqual(username);
+    expect(selectUsername(mockedState)).toEqual(username);
   });
 });

app/containers/LanguageProvider/index.js

@@ -9,17 +9,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { createSelector } from '@reduxjs/toolkit';
 import { IntlProvider } from 'react-intl';
 
-import { makeSelectLocale } from './selectors';
-
-const stateSelector = createSelector(makeSelectLocale(), locale => ({
-  locale,
-}));
+import { selectLocale } from './selectors';
 
 export default function LanguageProvider(props) {
-  const { locale } = useSelector(stateSelector);
+  const locale = useSelector(selectLocale);
   return (
     <IntlProvider locale={locale} messages={props.messages[locale]}>
       {React.Children.only(props.children)}

app/containers/LanguageProvider/selectors.js

@@ -11,7 +11,9 @@ const selectLanguage = state => state.language || initialState;
  * Select the language locale
  */
 
-const makeSelectLocale = () =>
-  createSelector(selectLanguage, languageState => languageState.locale);
+const selectLocale = createSelector(
+  [selectLanguage],
+  languageState => languageState.locale,
+);
 
-export { selectLanguage, makeSelectLocale };
+export { selectLanguage, selectLocale };

app/containers/LocaleToggle/index.js

@@ -5,22 +5,17 @@
  */
 
 import React from 'react';
-import { createSelector } from '@reduxjs/toolkit';
 import { useSelector, useDispatch } from 'react-redux';
 
 import Toggle from 'components/Toggle';
 import Wrapper from './Wrapper';
 import messages from './messages';
 import { appLocales } from '../../locales';
 import { changeLocale } from '../LanguageProvider/slice';
-import { makeSelectLocale } from '../LanguageProvider/selectors';
-
-const stateSelector = createSelector(makeSelectLocale(), locale => ({
-  locale,
-}));
+import { selectLocale } from '../LanguageProvider/selectors';
 
 export default function LocaleToggle() {
-  const { locale } = useSelector(stateSelector);
+  const locale = useSelector(selectLocale);
   const dispatch = useDispatch();
 
   const onLocaleToggle = evt =>

app/containers/ReposManager/saga.js

@@ -4,7 +4,7 @@
 
 import { call, put, select, takeLatest } from 'redux-saga/effects';
 import request from 'utils/request';
-import { makeSelectUsername } from 'containers/HomePage/selectors';
+import { selectUsername } from 'containers/HomePage/selectors';
 import { loadRepos, reposLoaded, repoLoadingError } from './slice';
 
 // If the repository is owned by a different user then the submitted
@@ -20,7 +20,7 @@ export const addRepoOwnershipKey = ({ username, repos }) =>
  */
 export function* getRepos() {
   // Select username from store
-  const username = yield select(makeSelectUsername());
+  const username = yield select(selectUsername);
   const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
 
   try {

app/containers/ReposManager/selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import { initialState } from './slice';
 
 /**
@@ -11,27 +11,19 @@ const selectReposManagerDomain = state => state.reposManager || initialState;
  * Other specific selectors
  */
 
-const makeSelectLoading = () =>
-  createSelector(
-    selectReposManagerDomain,
-    reposManagerState => reposManagerState.loading,
-  );
+const selectLoading = createSelector(
+  [selectReposManagerDomain],
+  reposManagerState => reposManagerState.loading,
+);
 
-const makeSelectError = () =>
-  createSelector(
-    selectReposManagerDomain,
-    reposManagerState => reposManagerState.error,
-  );
+const selectError = createSelector(
+  [selectReposManagerDomain],
+  reposManagerState => reposManagerState.error,
+);
 
-const makeSelectRepos = () =>
-  createSelector(
-    selectReposManagerDomain,
-    reposManagerState => reposManagerState.repositories,
-  );
+const selectRepos = createSelector(
+  [selectReposManagerDomain],
+  reposManagerState => reposManagerState.repositories,
+);
 
-export {
-  selectReposManagerDomain,
-  makeSelectLoading,
-  makeSelectError,
-  makeSelectRepos,
-};
+export { selectReposManagerDomain, selectLoading, selectError, selectRepos };

app/containers/ReposManager/tests/selectors.test.js

@@ -1,8 +1,8 @@
 import {
   selectReposManagerDomain,
-  makeSelectLoading,
-  makeSelectError,
-  makeSelectRepos,
+  selectLoading,
+  selectError,
+  selectRepos,
 } from '../selectors';
 import { initialState } from '../slice';
 
@@ -24,41 +24,38 @@ describe('selectReposManagerDomain', () => {
   });
 });
 
-describe('makeSelectLoading', () => {
+describe('selectLoading', () => {
   it('should select the loading', () => {
-    const loadingSelector = makeSelectLoading();
     const loading = false;
     const mockedState = {
       reposManager: {
         loading,
       },
     };
-    expect(loadingSelector(mockedState)).toEqual(loading);
+    expect(selectLoading(mockedState)).toEqual(loading);
   });
 });
 
-describe('makeSelectError', () => {
+describe('selectError', () => {
   it('should select the error', () => {
-    const errorSelector = makeSelectError();
     const error = true;
     const mockedState = {
       reposManager: {
         error,
       },
     };
-    expect(errorSelector(mockedState)).toEqual(error);
+    expect(selectError(mockedState)).toEqual(error);
   });
 });
 
-describe('makeSelectRepos', () => {
+describe('selectRepos', () => {
   it('should select the repos', () => {
-    const reposSelector = makeSelectRepos();
     const repositories = [];
     const mockedState = {
       reposManager: {
         repositories,
       },
     };
-    expect(reposSelector(mockedState)).toEqual(repositories);
+    expect(selectRepos(mockedState)).toEqual(repositories);
   });
 });

internals/generators/container/index.js.hbs

@@ -18,7 +18,6 @@ import { FormattedMessage } from 'react-intl';
 {{/if}}
 {{#if wantActionsAndReducer}}
 import { useSelector, useDispatch } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
 {{/if}}
 
 {{#if wantActionsAndReducer}}
@@ -33,7 +32,7 @@ import { useInjectSaga } from 'redux-injectors';
   {{/if}}
 {{/if}}
 {{#if wantActionsAndReducer}}
-import makeSelect{{properCase name}} from './selectors';
+import select{{properCase name}} from './selectors';
 import { reducer } from './slice';
 {{/if}}
 {{#if wantSaga}}
@@ -43,12 +42,6 @@ import saga from './saga';
 import messages from './messages';
 {{/if}}
 
-{{#if wantActionsAndReducer}}
-const stateSelector = createStructuredSelector({
-  {{camelCase name}}: makeSelect{{properCase name}}(),
-});
-{{/if}}
-
 function {{ properCase name }}() {
   {{#if wantActionsAndReducer}}
   useInjectReducer({ key: '{{ camelCase name }}', reducer });
@@ -59,7 +52,7 @@ function {{ properCase name }}() {
   {{#if wantActionsAndReducer}}
 
   /* eslint-disable no-unused-vars */
-  const { {{camelCase name}} } = useSelector(stateSelector);
+  const {{camelCase name}} = useSelector(select{{properCase name}});
   const dispatch = useDispatch();
   /* eslint-enable no-unused-vars */
   {{/if}}

internals/generators/container/selectors.js.hbs

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import { initialState } from './slice';
 
 /**
@@ -15,8 +15,10 @@ const select{{ properCase name }}Domain = state => state.{{ camelCase name }} ||
  * Default selector used by {{ properCase name }}
  */
 
-const makeSelect{{ properCase name }} = () =>
-  createSelector(select{{ properCase name }}Domain, substate => substate);
+const select{{ properCase name }} = createSelector(
+  [select{{ properCase name }}Domain],
+  substate => substate
+);
 
-export default makeSelect{{ properCase name }};
+export default select{{ properCase name }};
 export { select{{ properCase name }}Domain };

internals/templates/containers/App/selectors.js

@@ -6,7 +6,9 @@ import { createSelector } from '@reduxjs/toolkit';
 
 const selectRouter = state => state.router;
 
-const makeSelectLocation = () =>
-  createSelector(selectRouter, routerState => routerState.location);
+const selectLocation = createSelector(
+  [selectRouter],
+  routerState => routerState.location,
+);
 
-export { makeSelectLocation };
+export { selectLocation };

internals/templates/containers/App/tests/selectors.test.js

@@ -1,14 +1,13 @@
-import { makeSelectLocation } from 'containers/App/selectors';
+import { selectLocation } from 'containers/App/selectors';
 
-describe('makeSelectLocation', () => {
+describe('selectLocation', () => {
   it('should select the location', () => {
-    const locationStateSelector = makeSelectLocation();
     const router = {
       location: { pathname: '/foo' },
     };
     const mockedState = {
       router,
     };
-    expect(locationStateSelector(mockedState)).toEqual(router.location);
+    expect(selectLocation(mockedState)).toEqual(router.location);
   });
 });