Hi everyone, I'm about to show you how to apply Redux into React/ React Native
Redux is used to manage your app's state instead of using state in every component
I will tell you more about the benefits of using Redux later
Here is my reference, Pure Redux of Dave Ceddia, this is a easy-to-understand document I have ever seen until know
You can go through all the basics of Redux in only 43 pages. And I use this document to show you how Redux works and how to use it in our apps
Now, let's start :))
There are all 7 steps: first we need to know the benefits of Redux, and then how to use it in React/ React Native
I suppose that you know about the basics of React/ React Native such as: state, props
Firstly, passing data multiple levels using 'props' is a nightmare, redux can resolve this
Secondly, Redux makes it's easy to test through action's type (I tell about this later)
STEP 1: Install modules 'redux' and 'react-redux'
STEP 2: Create a simple store: store is used to contain your app's state (combines all components state)
I want to build app first
Import function 'createStore' from 'redux'
Create a store (note that we just only have one store in an app)
Here, we need a reducer for this store
STEP 3: Create a simple reducer (a reducer is a pure function which returns new sate based on an action)
Reducer has 2 parameters: 'state' and 'action'
'state': this is a state of current reducer and we need to init this
'action': simple is a plain object contains some values: such as: 'type' (required, tell us what is happening) and 'payload' (optional, contains data passing to reducer)
Because reducer is a pure function, we shouldn't change these parameters directly by setting value to state (this is a rule)
Now, create a 'reducer' and pass it to function 'createStore'
First, we need to create 'initialState' contains reducer's state
Next, create 'reducer' with 'state' and 'action' parameters
Pass reducer to function 'createStore'
Debug our app
Here, we can see info of action
STEP 4: Connect Redux to our app using 'react-redux'
Before do that, I want to create a Counter component using state and then I will apply redux to this component
Now, import Provider to apply 'store' into the Root Component, in this case is App Component
Here, we use React Redux to connect Redux to Components to use reducers 'state'
Create 'mapStateToProps' to map reducers' state with props
This function returns a object with properties that we need to use, here I want to use 'count' of state
Note this, we declared 'count' in initialState before
Now, connect redux to component Counter using function 'connect' from 'react-redux' with first paremeter is 'mapStateToProps', the second is 'mapDispatchToProps' (You will know it later)
Comment all line relates to 'this.state'
Use 'this.props.count' instead of 'this.state.count' (we did 'mapStateToProps' before)
OK, it works, count is 0, no error :D
Now, how about update 'count' using functions: 'increment', 'decrement' or 'reset'. I told that a benefit of Redux is let us know what is happening using action. Now, let's find out.
When we use function 'connect' we also receive a function 'dispatch' in 'props', this function send 'action' to 'reducer' to update reducer state
In reducer, we check action's type to know which action is performed
If 'INCREMENT', we increase 'count' to 1 unit
And as I mentioned before, reducer is a pure function, so we can not use this way: state.count = state.count+1
We use '...' to get other state's properties and change 'count'
Do the same for 'DECREMENT', 'RESET'
Now, call function 'dispatch' and pass 'action' object info
Rebuild app and enjoy :D
We already had a 'mapStateToProps' to map 'state' to 'props' of component
We also knew that 'action' is just an object
Now, create 'actions' folder, then create 'counterActions.js' file in it
Create constant string 'INCREMENT', 'DECREMENT', 'RESET'
We also create function 'increment' which returns an object with type is 'INCREMENT'
Do the same for functions: 'decrement' and 'reset'
Replace strings 'INCREMENT', 'DECREMENT', 'RESET' with constant strings
Here we just use function 'increment' in file 'counterActions.js'
Do same for 'decrement' and 'reset'
It works :D
Now you see that we call every function 'increment', 'decrement', 'reset' in 'this.props.dispatch'
But we can use these functions directly such as: 'this.props.increment()',..
Create 'mapDispatchToProps' and add all functions you need
Then, pass 'mapDispatchToProps' to second parameter of function 'connect'
Now, you can call 'increment' directly: 'this.props.increment()'
Enjoy :)))) REMEMBER TO LIKE AND SUBSCRIBE FOR NEW VIDEOS
