Merge pull request #2 from ebarriosara/'03_Implementation'

Add redux

Author: brauliodiez

03 Add redux/package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@types/react": "^16.0.22",
     "@types/react-dom": "^16.0.3",
+    "@types/react-redux": "^5.0.13",
     "awesome-typescript-loader": "^3.3.0",
     "babel-core": "^6.26.0",
     "babel-preset-env": "^1.6.1",
@@ -28,6 +29,9 @@
   "dependencies": {
     "bootstrap": "^3.3.7",
     "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "react-dom": "^16.1.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
   }
 }

03 Add redux/readme.md

@@ -0,0 +1,16 @@
+import { MemberEntity } from '../api/model';
+import { actionsDefs } from '../const';
+import { fetchMemberList } from '../api';
+
+export const fetchMemberListRequestStart = () => (dispatcher) => {
+  const promise = fetchMemberList();
+
+  promise.then((memberList) => {
+    dispatcher(fetchMemberListCompleted(memberList));
+  });
+}
+
+const fetchMemberListCompleted = (memberList : MemberEntity[]) => ({
+  type: actionsDefs.FETCH_MEMBERS_COMPLETED,
+  payload: memberList,
+});

03 Add redux/src/actions/fetchMemberList.ts

@@ -0,0 +1 @@
+export { fetchMemberListRequestStart } from './fetchMemberList';

03 Add redux/src/actions/index.ts

@@ -0,0 +1,5 @@
+const prefix = 'MEMBERS_MODULE';
+
+export const actionsDefs = {
+  FETCH_MEMBERS_COMPLETED: `[${prefix}][1] Member Fetching Completed fetchMembersCompleted`,
+}

03 Add redux/src/const/actionsDefs.ts

@@ -0,0 +1 @@
+export { actionsDefs } from './actionsDefs';

03 Add redux/src/const/index.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
+import { Provider } from 'react-redux';
+import { store } from './store';
 import { MemberListContainer } from './pages/members'; 
 
 ReactDOM.render(
-  <MemberListContainer />,
+  <Provider store={store}>
+    <MemberListContainer />
+  </Provider>,
   document.getElementById('root')
 );

03 Add redux/src/main.tsx

@@ -1,34 +1,23 @@
 import * as React from 'react';
+import { connect } from 'react-redux';
+import { State } from '../../reducers';
 import { MemberListPage } from './page';
 import { MemberEntity } from './viewModel';
-import { fetchMemberList } from '../../api';
+import * as memberApi from '../../api';
 import { mapMemberListFromModelToVm } from './mapper';
+import { fetchMemberListRequestStart } from '../../actions';
 
-interface State {
-  memberList : MemberEntity[];
-}
+const mapStateToProps = (state: State) => ({
+  // This mapping is necessary because we have two different ModelEntity interfaces with the same name.
+  // This could be improved using selectors.
+  memberList: mapMemberListFromModelToVm(state.memberListReducer.memberList),
+});
 
-export class MemberListContainer extends React.Component<{}, State> {
+const mapDispatchToProps = (dispatch) => ({
+  fetchMemberList: () => { dispatch(fetchMemberListRequestStart()) }
+});
 
-  constructor(props) {
-    super(props);
-    this.state = { memberList: [] };
-  }
-
-  fetchMembers = () => {
-    fetchMemberList().then((memberList) => {
-      this.setState({
-        memberList: mapMemberListFromModelToVm(memberList),
-      });
-    });
-  }
-
-  render() {
-    return (
-      <MemberListPage
-        memberList={this.state.memberList}
-        fetchMemberList={this.fetchMembers}
-      />
-    );
-  }
-}
+export const MemberListContainer = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(MemberListPage);

03 Add redux/src/pages/members/container.tsx

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import { memberListReducer, MemberListState } from './memberListReducer';
+
+export interface State {
+  memberListReducer : MemberListState;
+}
+
+export const reducers = combineReducers<State>({
+  memberListReducer,
+});

03 Add redux/src/reducers/index.ts

@@ -0,0 +1,35 @@
+import { MemberEntity } from '../api/model';
+import { actionsDefs } from '../const';
+
+// We create an object showing how spread operator (...) works because it helps keeping the object inmutable,
+// but we could have set the state directly to an array of members.
+export interface MemberListState {
+  memberList : MemberEntity[];
+}
+
+// The interface BaseAction could be promoted to a common file and be reused in other reducers
+interface BaseAction {
+  type : string;
+  payload : any;
+}
+
+const createDefaultState = () => ({
+  memberList: [],
+});
+
+export const memberListReducer = (state : MemberListState = createDefaultState(), action : BaseAction) : MemberListState => {
+  switch (action.type) {
+    case actionsDefs.FETCH_MEMBERS_COMPLETED:
+      // Return the new state
+      return handleFetchMembersCompleted(state, action.payload);
+  }
+
+  return state;
+}
+
+const handleFetchMembersCompleted = (state : MemberListState, memberList : MemberEntity[]) : MemberListState => ({
+  // We could have simply returned the list of members, but we are returning an object with the list of members 
+  // using spread operator to show how it helps keeping objects inmutable
+  ...state,
+  memberList,
+});