Fixed issues with reducers and selectors

react-boilerplate · Jun 11, 2018 · 6b4cc2f · 6b4cc2f
1 parent 858b51c
commit 6b4cc2f
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 10 deletions.
diff --git a/app/containers/HomePage/reducer.js b/app/containers/HomePage/reducer.js
@@ -16,7 +16,7 @@ import {
 } from './constants';
 
 // The initial state of the App
-const initialState = fromJS({
+export const initialState = fromJS({
   username: '',
 });
 

diff --git a/app/containers/HomePage/selectors.js b/app/containers/HomePage/selectors.js
@@ -3,8 +3,9 @@
  */
 
 import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
-const selectHome = (state) => state.get('home');
+const selectHome = (state) => state.get('home', initialState);
 
 const makeSelectUsername = () => createSelector(
   selectHome,

diff --git a/app/containers/LanguageProvider/reducer.js b/app/containers/LanguageProvider/reducer.js
@@ -13,7 +13,7 @@ import {
   DEFAULT_LOCALE,
 } from '../App/constants';
 
-const initialState = fromJS({
+export const initialState = fromJS({
   locale: DEFAULT_LOCALE,
 });
 

diff --git a/app/containers/LanguageProvider/selectors.js b/app/containers/LanguageProvider/selectors.js
@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
 /**
  * Direct selector to the languageToggle state domain
  */
-const selectLanguage = (state) => state.get('language');
+const selectLanguage = (state) => state.get('language', initialState);
 
 /**
  * Select the language locale

diff --git a/app/reducers.js b/app/reducers.js
@@ -25,7 +25,7 @@ const routeInitialState = fromJS({
 /**
  * Merge route into the global application state
  */
-function routeReducer(state = routeInitialState, action) {
+export function routeReducer(state = routeInitialState, action) {
   switch (action.type) {
     /* istanbul ignore next */
     case LOCATION_CHANGE:

diff --git a/app/tests/reducers.test.js b/app/tests/reducers.test.js
@@ -2,6 +2,7 @@
  * Test route reducer
  */
 
+import { fromJS } from 'immutable';
 import { LOCATION_CHANGE } from 'react-router-redux';
 import { routeReducer } from '../reducers';
 
@@ -12,10 +13,12 @@ describe('route reducer', () => {
   });
 
   it('should handle the location_change action correctly', () => {
-    const state = { foo: 'bar' };
-    const payload = { baz: 'qux' };
+    const state = fromJS({ location: 'somewhere' });
+    const payload = 'elsewhere';
     const action = { type: LOCATION_CHANGE, payload };
 
-    expect(routeReducer(state, action)).toEqual(payload);
+    const expectedState = { location: payload };
+    const resultState = routeReducer(state, action).toJS();
+    expect(resultState).toEqual(expectedState);
   });
 });
diff --git a/internals/templates/containers/LanguageProvider/reducer.js b/internals/templates/containers/LanguageProvider/reducer.js
@@ -13,7 +13,7 @@ import {
   DEFAULT_LOCALE,
 } from '../App/constants'; // eslint-disable-line
 
-const initialState = fromJS({
+export const initialState = fromJS({
   locale: DEFAULT_LOCALE,
 });
 

diff --git a/internals/templates/containers/LanguageProvider/selectors.js b/internals/templates/containers/LanguageProvider/selectors.js
@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
 /**
  * Direct selector to the languageToggle state domain
  */
-const selectLanguage = (state) => state.get('language');
+const selectLanguage = (state) => state.get('language', initialState);
 
 /**
  * Select the language locale