add slice

commented code

Author: ksample89

.eslintcache

@@ -1,16 +1,14 @@
 import React, { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors'
 import { saga } from './saga'
-import { key, countriesReducer } from './reducer'
-import { actions } from './actions'
+import { key, reducer, actions } from './slice'
 import { selectCountries, selectLoading, selectError } from './selectors'
 import { LoadingIndicator } from 'app/components/LoadingIndicator'
-import { Link } from 'app/components/Link'
-import { PageWrapper } from 'app/components/PageWrapper'
 
 export const Countries = () => {
-  useInjectReducer({ key: key, reducer: countriesReducer })
+  useInjectReducer({ key: key, reducer: reducer })
   useInjectSaga({ key: key, saga })
 
   const countries = useSelector(selectCountries)
@@ -23,7 +21,14 @@ export const Countries = () => {
   }, [dispatch])
 
   return (
-    <PageWrapper>
+    <div
+      style={{
+        boxSizing: 'content-box',
+        margin: '0 auto',
+        padding: '0 1.5rem',
+        width: '960px',
+      }}
+    >
       <h1>Countries</h1>
       {isLoading && <LoadingIndicator small />}
       {countries?.length > 0 && (
@@ -36,6 +41,6 @@ export const Countries = () => {
         </ul>
       )}
       {error && <div>{error}</div>}
-    </PageWrapper>
+    </div>
   )
 }

src/app/components/Link/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,26 +1,26 @@
-import { call, put, takeLatest } from 'redux-saga/effects';
-import { request } from 'utils/request';
-import { actions } from './actions';
+import { call, put, takeLatest } from 'redux-saga/effects'
+import { request } from 'utils/request'
+import { actions } from './slice'
 
 export function* fetchCountries() {
-  const requestURL = `https://api.carerev.com/api/v1/countries`;
+  const requestURL = `https://api.carerev.com/api/v1/countries`
 
   try {
-    const { countries } = yield call(request, requestURL);
+    const { countries } = yield call(request, requestURL)
 
     if (countries?.length > 0) {
-      yield put(actions.fetchCountriesSuccess(countries));
+      yield put(actions.fetchCountriesSuccess(countries))
     } else {
-      yield put(actions.fetchCountriesError('No countries found.'));
+      yield put(actions.fetchCountriesError('No countries found.'))
     }
-  } catch (err) {
-    yield put(actions.fetchCountriesError(err.toString()));
+  } catch (err: any) {
+    yield put(actions.fetchCountriesError(err.toString()))
   }
 }
 
 /**
  * Root saga manages watcher lifecycle
  */
 export function* saga() {
-  yield takeLatest(actions.fetchCountries.type, fetchCountries);
+  yield takeLatest(actions.fetchCountries.type, fetchCountries)
 }

src/app/components/Link/__tests__/index.test.tsx

@@ -1,22 +1,21 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createSelector } from '@reduxjs/toolkit'
 
-import { RootState } from 'types';
-import { initialState } from './reducer';
+import { RootState } from 'types'
+import { initialState } from './slice'
 
-// First select the relevant part from the state
-const selectDomain = (state: RootState) => state.countries || initialState;
+const selectDomain = (state: RootState) => state.countries || initialState
 
 export const selectLoading = createSelector(
   [selectDomain],
   countriesState => countriesState.isLoading,
-);
+)
 
 export const selectError = createSelector(
   [selectDomain],
   countriesState => countriesState.error,
-);
+)
 
 export const selectCountries = createSelector(
   [selectDomain],
   countriesState => countriesState.countries,
-);
+)

src/app/containers/Countries/actions.tsx

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { CountriesState } from './types'
+
+const initialState: CountriesState = {
+  countries: [],
+  error: undefined,
+  isLoading: false,
+}
+
+const key = 'countries'
+const slice = createSlice({
+  name: key,
+  initialState,
+  reducers: {
+    fetchCountries: state => {
+      state.isLoading = true
+    },
+    fetchCountriesSuccess: (state, { payload }) => {
+      state.isLoading = false
+      state.countries = payload
+    },
+    fetchCountriesError: (state, { payload: error }) => {
+      state.isLoading = false
+      state.error = error
+    },
+  },
+})
+
+const { actions, reducer } = slice
+
+export { actions, reducer, initialState, key }