Learning Redux and notes
Tags: javascript, react, redux
Published: 2018-08-17 09:27:52

---
title: Learning Redux and notes 
published: true
description: 
tags: javascript, reactjs, redux, 
---

This is the notes and learning that I'm getting while learning React Redux from Stephen Grider's course, and I will write the conclusion and showcase the app that will be created along with.

The code repo is here https://github.com/Tapudp/BookList

This app has two major container(components) 

* BookList
* activeBook

The bookList will render the list of books that has been saved in the reducers, and then container will render it on page with the ability to click and choose one of them

The activeBook container comes into the picture when the action generator `onClick` event happens it will show all the details of that particular book from the activeBook reducer. 

The following is the step-by-step process that has been done while creating the whole app

# Book Library App


### Reducers

- `redux` has this fanct words like reducers so gonna create a reducer file with function which returns an array of books

### Containers Connecting Redux to react
- it is already generating a state for the component
- created `book-list.js` component without any connection to state yet.
- `containers` which are similar to components but just has the dumb component in which redux states can be added

### Container implementation
- adding the `booklist` component in main app file
- adding `react-redux` library in the `book-list` because it is going to be the container for our applications
- `connect` takes a function and a component and produces a Container
- Provider will give you the store where we can call our reducers
- and in the `book-list` which is a dumb component till now will have a function `mapStateToProps` which directly looks into the store for the `books` or any state props are defined there.

### Action and Action Creators
- user clicks and creates an actions action
- action creator returns an action
- action automatically sent to all reducers
- `activeBook` property on state set to the value returned from the `activeBook` reducer
- All reducers processed the action and returns the new state.
New State has been assembled.
Notify containers of the changes to state
- On notification containers will render with new props

### Binding Action creator
- create a action function `selectbook`
- attatching `selectBook` action creator with the book-list container
- `bindActionCreators` function from the redux library
- `mapDispatchToProps` uses `bindActionCreators` with `dispatch` function object as second argument and it is going to take all the actions and going to pass on to all the different reducers inside the application

### Creating an action
- `onClick` event and the action just logs in for now
- so now action creator should return an action
- now changing the action creator which has two keywords `type` which can be a variable and a `payload` the book itself

### Consuming Actions in reducer
- created a new reducer `activeBook reducer`
- 2 arguments to reducers `currentState` and `action`
- state argument is not application state only the state a particular reducer is responsible forp
- redux doesn't take in `undefined` state so we will use ES6 syntax and say `state = null` the functional argument itself so that it says `if the state is undefined then set it to null`
- never mutate the current to present the new state, always return a fresh object
- and `active_reducer` need to be in the combined reducer state in that `index.js`
- any key that provide our `combineReducer` ends up as a key to our global state

I will keep updating as I progress