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 thebook-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 functionmapStateToProps
which directly looks into the store for thebooks
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 theactiveBook
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
usesbindActionCreators
withdispatch
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 apayload
the book itself
Consuming Actions in reducer
- created a new reducer
activeBook reducer
- 2 arguments to reducers
currentState
andaction
- 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 saystate = null
the functional argument itself so that it saysif 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 thatindex.js
- any key that provide our
combineReducer
ends up as a key to our global state
I will keep updating as I progress
Top comments (3)
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.
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
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 :(