Welcome to the ReduxReducer wiki!

• This sample is very simple to understand relations between Redux-React-Action.

• just go to command and go to the project directory, mine is D:\LearnFun\ReduxSimpleStarter
• D:\LearnFun\ReduxSimpleStarter> npm install //this will install all required dependencies defined in package.json file

• D:\LearnFun\ReduxSimpleStarter> npm start // if you check in package.json file, I've define script to start webpack-dev-server

If everything goes fine, then you'll be able to see page with book list and when you click on book, detail will be displayed.

• React: it just render your view, doesn't know about data
• Action: do something like comand;return action type and data then trigger to all reducer, application state is not the component state.
• Middleware: it comes between Action and Reducer. Before it reach-out to reducer, sometime we may need to manipulate data like logging or api call etc. then once it is done, it will re-initiate the action.
• Reducer: accept the trigger action by its type and may read or manipulate data and update the application state. Then usually, application state read from container.
• Container: it's bridge between Ract and Redux, container glue the view and data by mapping properties and state.

1. let's look at app.js in a component i.e react component. It's ask is just to render Book and BookDetail component.

2. Now, before we jump it in Book component, lets look on the action and reducer. * actions/index.js: this is like a command which initiate from booklist to select active book. since, it is an action, it has to return, @generally {type, payload}: type is some how similar to command and payload is data. In this example, we have only one action i.e get book detail when user click on particular books from book list. so, I've define type =BOOK_SELECTED and payload = selected book. As I mentioned this action is trigger from BookList Component, check on it. onClick={()=>this.props.selectBook(book)}

   • reducer-books.js: this only reads/retrieves book with title i.e Book{title:"title description"}
   • reducer-active-book.js: this will return state or data for BookDetails or ActiveBook Component.
   • reducer/index.js: this present combineReducers which set application state, here book and activeBook is the application state.

3. Container Component: state of the component is derived from reducer, container map the state and dispatch the action.

• book-list.js: mapStateToProps is defined to map property of book and it is set to state.book. state.book is declared in reducer/index.js. So its gluing state from reducer to view.

** leave your comment or suggestion for this **