Theme and language toggle

src/index.jsx

@@ -3,7 +3,8 @@ import { render } from 'inferno'
 import { Provider } from 'inferno-redux';
 import { applyMiddleware, createStore, combineReducers } from 'redux';
 
-import { themeReducer } from './reducers';
+import { langReducer, themeReducer } from './reducers';
+import { fetchLang } from './actions'
 
 import Main from './main.jsx'
 
@@ -16,20 +17,43 @@ const logger = process.env.DEBUG ? store => next => action => {
 		return result
 	} : null
 
-const persistedState = localStorage.getItem('reduxState')
-const initState = persistedState ? JSON.parse(persistedState) : {}
+const thunk = store => next => action =>
+	typeof action === 'function'
+		? action(store.dispatch, store.getState)
+		: next(action)
 
-const reducers = combineReducers(
-	{theme: themeReducer})
-const store = process.env.DEBUG ?
-	createStore(reducers, initState, applyMiddleware(logger)) : createStore(reducers, initState)
+const persistedState = {
+	theme: localStorage.getItem('theme') || themeReducer(undefined, {type: null}),
+	lang: localStorage.getItem('lang') ?
+		{...langReducer(undefined, {type: null}), lang: localStorage.getItem('lang')} :
+		langReducer(undefined, {type: null})
+}
+//const initState = persistedState ? JSON.parse(persistedState) : {}
 
-store.subscribe(() => {
-	localStorage.setItem('reduxState', JSON.stringify(store.getState()))
+const reducers = combineReducers({
+	theme: themeReducer,
+	lang: langReducer
 })
 
-render(
-	<Provider store={store}>
-		<Main />
-	</Provider>,
-	document.getElementById("root"))
+const store = createStore(
+	reducers,
+	persistedState,
+	process.env.DEBUG ? applyMiddleware(thunk, logger) : applyMiddleware(thunk))
+
+let savedState = {
+	theme: store.getState().theme,
+	lang: store.getState().lang.lang
+}
+store.subscribe(() => {
+	const state = store.getState()
+	if(savedState.theme !== state.theme) localStorage.setItem('theme', store.getState().theme)
+	if(savedState.lang !== state.lang.lang) localStorage.setItem('lang', store.getState().lang.lang)
+})
+
+store.dispatch(fetchLang(store.getState().lang.lang)).then(() => {
+	render(
+		<Provider store={store}>
+			<Main />
+		</Provider>,
+		document.getElementById("root"))
+})