Reducer setup complete

Author: moazkh60

App.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import Router from './src/router/Router';
 import {Provider} from 'react-redux';
+import store from './Store';
 
 class App extends Component {
   render() {

Store.js

@@ -1,5 +1,5 @@
 import { createStore, applyMiddleware } from 'redux'
-import { rootReducer } from './src/reducers/'
+import rootReducer from './src/reducers/'
 import thunk from 'redux-thunk'
 
 const store = createStore(

package.json

@@ -19,7 +19,8 @@
     "react-navigation-stack": "^1.9.4",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "7.6.4",

src/actions/ExpenseListActions.js

@@ -1,8 +1,8 @@
 import { FETCH_LIST } from '../common/Types'
 
-export const fetchList = (data) => {
+export const fetchListAction = (data) => {
     return {
-        types: FETCH_LIST,
+        type: FETCH_LIST,
         payload: {
             data
         }

src/components/listExpenses/ListExpenses.js

@@ -1,10 +1,26 @@
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { fetchListAction } from '../../actions/ExpenseListActions'
 
 class ListExpenses extends Component {
     render(){
+        this.props.fetchListAction({test:'complete'})
         return <View><Text>List Expenses</Text></View>
     }
 }
 
-export default ListExpenses
+/**
+ * Maps properties from redux store
+ * to state in a component
+ * @param {object} state
+ * @returns 
+ */
+mapStateToProps = state => {
+    console.log('state ', state)
+    return {
+        state
+    }
+}
+
+export default connect(mapStateToProps, {fetchListAction})(ListExpenses)

src/reducers/ExpenseListReducer.js

@@ -5,16 +5,11 @@ const initialState = {
     text: '',
 }
 
-const ExpenseListReducer = (state = initialState, action = {}) => {
+export default function ExpenseListReducer(state = initialState, action = {}){
     switch(action.type) {
-        
         case FETCH_LIST:
-        return { ...state, text: action.payload.data }
-
+          return { ...state, text: action.payload.data }
         default:
-        return state;
+          return state;
     }
-
-}
-
-export default ExpenseListReducer
+}

src/reducers/index.js

@@ -1,4 +1,5 @@
+import { combineReducers } from 'redux'
+import ExpenseListReducer from './ExpenseListReducer'
 
-import ExpenseListReducer from './expenseListReducer'
-
-export default rootReducer = combineReducers ({ ExpenseListReducer })
+const rootReducer = combineReducers ({ expenseList: ExpenseListReducer })
+export default rootReducer;

yarn.lock

@@ -5474,6 +5474,11 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"