Let’s React-Redux !! -part 4

Now lets look at the reducers associated with the containers in the previous posts. Following is the books reducer. All it does is give back the state of the component.(In case if you want to get the data from an api call , this is the place to wire it in)

export default function () {
 return [
  {title: ‘You dont know javascript’, pages: ‘10’},
  {title: ‘Encyclopedia’, pages: ‘102’},
  {title: ‘Jason Bourne’, pages: ‘401’},
  {title: ‘Puzzles’, pages: ‘1570’}
 ]
}

Similarly lets have a look at the active book reducer. This has some additional logic to decide what state to return according to the action dispatched by the component.This state will eventually be rendered by the container which is subscribed to this reducer.

export default function (state = null, action) {
 switch (action.type) {
 case ‘BOOK_SELECTED’:
  return action.payload;
 }
 return state;
}

Finally, there is a combined reducer , which will denote the state of the whole app.

import { combineReducers } from ‘redux’;
import Books from ‘./reducer_books’;
import ActiveBook from ‘./reducer_active_book’;
const rootReducer = combineReducers({
 books : Books,
 activeBook : ActiveBook
});
export default rootReducer;

Lets sum up the whole code in the next post.