I am new to React and as of now only use it for my side projects. While learning React, there were plenty of tutorials on React as Beginner, still I had hard time understanding how all pieces together solve the puzzle. So I am writing this blog for someone like me, who is just looking to understand, how all the pieces go together in a redux based app. The application that we will create here is a non fancy application which puts a random number in the store with each click and toggles the state flag from empty to non-empty.
In any redux application, we need following pieces :
Store
This is an object that represents the main state of the application. Based on the application requirement, it can be a simple key-valued object or a very heavy nested object. In our case , we have a simple object with only two attributes :
• randomNums : An array of numbers
• isEmpty : A flag used to show if the above array is empty or not
const defaultState = {
randomNums : [],
isEmpty : true
};
Action
They are the medium through which an application interacts with the store. They are the payloads/objects transferring data from application to store. All actions are plain JavaScript objects with a mandatory attribute named ‘type’ which has string value describing the action to perform on the store.
{
type : 'REPLACE', -----This is the action
randomNum ----- this is the actual payload
}
ActionCreators
These are the functions returning action objects as defined in step 2. All action creators can be combined in a single file.
export function replace(randomNum){
return {
type : 'REPLACE',
randomNum
}
}
export function toggleFlag(){
return {
type : 'TOGGLE'
}
}
Reducers
Reducers define how an application state changes, in response to the action being sent to the store. They use the action’s ‘type’ to determine its impact on the store. You can think of reducer taking an action and state as input and producing a new state.
const appendItem = (state=[],action) => {
switch(action.type){
case 'REPLACE':
return {randomNums : [action.randomNum],
isEmpty : false};
case 'TOGGLE':
return {randomNums : [],
isEmpty : true};
default :
return state;
}
}
export default appendItem;
Now the question is, how our components can access and modify state. What that means is , our components should be able to access the state and call the type of action (defined in actionCreators) as suitable. So to achieve that task, I will be overriding following two functions
mapStateToProps
This method maps the state to the application props. Return the object with only properties needed by the components.
function mapStateToProps(state) {
return {
randomNums : state.randomNums,
isEmpty : state.isEmpty
}
}
mapDispatchToProps
This method binds the dipatch function to the Props. Dispatch is the function of redux store which propagates an action and causes the state change. BindActionCreators binds the actions to be dispatched.
function mapDispatchToProps(dispatch){
return bindActionCreators(actionCreators,dispatch);
}
react-redux module provides a connect function to bind dispatch and state to our component. As we can see below, it can take two arguments :
a.) mapStateToProps
b.) mapDispatchToProps
export default connect(mapStateToProps,mapDispatchToProps)(Lister);
Lister Component
import React from 'react';
import createReactClass from 'create-react-class';
import App from '../App.css'
const Lister = createReactClass({
render(){
return (
<div className="App">
<button onClick={() => this.props.append(Math.random()*100)}>Append</button>
<button onClick={() => this.props.toggleFlag()}>Clear</button>
<p>The state is : {this.props.isEmpty ? 'Empty':'Populated'}</p>
{this.props.randomNums.map((randomNum,i)=> {
return (
<div className='App' key={i}>
<p>
<strong>
{randomNum}
</strong>
</p>
</div>
)
})}
</div>
)
}
});
export default Lister;
Now lets create our store using the redux createStore function. Lets provide it with a default state and reducer which can actually change the state.
const defaultState = {
randomNums : [],
isEmpty : true
};
const store = createStore(appender,defaultState);
Last piece to complete the application is to provide the store to the application. React-redux module provides the Provider tag which provides access of store to the application.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
Top comments (1)
Nice article!