Learning Redux and notes

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

Comments

[Kushan Joshi]

Hey Divyesh, it is really hard to follow your points without any context.
It would be great if you could give more context with the help of links or sample code to what you are talking about here.

[Divyesh Parmar]

Hey Kepta, meeting you after so long. Yeah I forgot to format it nicely, it is from a course that I'm learning from which is about creating an app of bookList and it shows the details of book when asked for.

The repo is here github.com/Tapudp/BookList

I'm sorry I know it looks naive I'll work on it to improve effectively

Edited

[Divyesh Parmar]

Btw I just came to Bangalore, woulf catch up sometime, please guide/advice me on how to learn React Redux and functional programming as I'm still looking for job :(