reducers and actions added

Author: bipinswarnkar1989

react-redux-client/src/actions/appActions.js

@@ -0,0 +1,9 @@
+// ./react-redux-client/src/actions/appActions.js
+
+const apiUrl = "/api/";
+
+export const toggleAddBook = () => {
+  return {
+    type: 'TOGGLE_ADD_TODO'
+  }
+}

react-redux-client/src/actions/todoActions.js

@@ -0,0 +1,59 @@
+// ./react-redux-client/src/actions/todoActions.js
+
+const apiUrl = "http://localhost:3001/api/";
+
+export const toggleAddBook = () => {
+  return {
+    type: 'TOGGLE_ADD_TODO'
+  }
+}
+
+export const addTodo = (todo) => {
+
+}
+
+export const deleteTodo = (todo) => {
+
+}
+
+export const editTodo = (todo) => {
+
+}
+
+//Async action
+export const fetchTodos = () => {
+  // Returns a dispatcher function
+  // that dispatches an action at later time
+  return (dispatch) => {
+
+    dispatch(fetchTodosRequest());
+    // Returns a promise
+    return fetch(apiUrl)
+                .then(response => res.json())
+                .then(data =>
+                  // dispatch another action
+                  // to consume data
+                  dispatch(fetchTodosSuccess(data.books,data.message))
+                )
+                .then(error => {
+                  throw(error);
+                })
+  }
+}
+
+export const fetchTodosRequest = () => {
+  return {
+    type:'FETCH_TODOS_REQUEST'
+  }
+}
+
+
+//Sync action
+export const fetchTodosSuccess = (todos,message) => {
+  return {
+    type: 'FETCH_TODOS_SUCCESS',
+    todos: todos,
+    message: message,
+    receivedAt: Date.now
+  }
+};

react-redux-client/src/components/Todo.js

@@ -5,7 +5,7 @@ export default class Todo extends React.Component {
 
 
   render(){
-    const todo = this.props.mappedTodo;
+    const todo = this.props.mappedTodoState.todo;
     return(
       <div className="todoDetail">
        <h2>Todo Detail</h2>

react-redux-client/src/components/Todos.js

@@ -7,6 +7,10 @@ export default class Todos extends React.Component {
     super(props);
   }
 
+  componentWillMount(){
+    this.props.fetchTodos();
+  }
+
   showEditModal(bookToEdit){
      //this.props.mappedshowEditModal(todoToEdit);
   }
@@ -24,7 +28,7 @@ export default class Todos extends React.Component {
   }
 
   render(){
-    const todos = this.props.mappedTodos;
+    const todos = this.props.mappedTodoState.todos;
     return(
       <div className="col-md-12">
       <h3>Books</h3>

react-redux-client/src/containers/Todo.js

@@ -7,7 +7,7 @@ import Todo from '../components/Todo';
 const mapStateToProps = (state) => {
   return {
     //you can now say this.props.mappedAppSate
-    mappedTodo: state.todo
+    mappedTodoState: state.todoState
   }
 }
 

react-redux-client/src/containers/Todos.js

@@ -7,17 +7,18 @@ import Todos from '../components/Todos';
 const mapStateToProps = (state) => {
   return {
     //you can now say this.props.mappedAppSate
-    mappedTodos: state.todos
+    mappedTodoState: state.todoState
   }
 }
 
 // map actions to props
 const mapDispatchToProps = (dispatch) => {
   return {
     //you can now say this.props.mappedAppActions
+    fetchTodos: () => dispatch(todoActions.fetchTodos()),
     mappedAddTodo: todo => dispatch(todoActions.addTodo(todo)),
     mappedDeleteTodo: todoToDelete => dispatch(todoActions.deleteTodo(todoToDelete)),
-    mappedEditTodo: todoToEdit => dispatch(todoActions.deleteTodo(todoToEdit))
+    mappedEditTodo: todoToEdit => dispatch(todoActions.editTodo(todoToEdit))
   }
 }
 

react-redux-client/src/reducers/index.js

@@ -0,0 +1,13 @@
+// ./react-redux-client/src/reducers/index.js
+import { routerReducer as routing } from 'react-router-redux';
+import { combineReducers } from 'redux';
+import appReducer from './appReducer';
+import todoReducer from './todoReducer';
+
+export default combineReducers({
+  appState:appReducer,
+  todoState:todoReducer,
+  routing
+  // More reducers if there are
+  // can go here
+})

react-redux-client/src/reducers/todoReducer.js

@@ -0,0 +1,63 @@
+// ./react-redux-client/src/reducers/todoReducer.js
+const INITIAL_STATE = {
+  todos:[],
+  todo:null,
+  isFetching: false,
+  error: null,
+  successMsg:null,
+  showDeleteModal: false,
+  todoToDelete: null,
+  showEditModal: false,
+  todoToEdit: null,
+}
+
+export const todoReducer = (currentState = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case 'FETCH_TODOS_REQUEST':
+          return {
+            ...currentState,
+            todos:[],
+            todo:null,
+            isFetching: true,
+            error: null,
+            successMsg:null,
+            showDeleteModal: false,
+            todoToDelete: null,
+            showEditModal: false,
+            todoToEdit: null,
+          }
+
+    case 'FETCH_TODOS_SUCCESS':
+          return {
+            ...currentState,
+            todos:action.todos,
+            todo:null,
+            isFetching: false,
+            error: null,
+            successMsg:action.message,
+            showDeleteModal: false,
+            todoToDelete: null,
+            showEditModal: false,
+            todoToEdit: null,
+          }
+
+    case 'FETCH_TODOS_FAILED':
+          return {
+            ...currentState,
+            todos:[],
+            todo:null,
+            isFetching: false,
+            error: action.message,
+            successMsg:null,
+            showDeleteModal: false,
+            todoToDelete: null,
+            showEditModal: false,
+            todoToEdit: null,
+          }
+
+
+    default:
+       return currentState;
+
+  }
+}