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;
+
+ }
+}