Integrate Selector into Redux state management

When we develop any application, we must consider about performance. In React application, when the state change, components will re-render. Even though, the change has happened only in a few fields of the state, but every component will re-render. This may affect to various computations that we do in front end. Therefore, Reselect came into the picture. Following are main reasons to use reselect in ReactJS application.

• Selectors can compute derived data, allowing Redux to store the minimal possible state
• Selectors are efficient. A selector is not recomputed unless one of its arguments changes
• Selectors are composable. They can be used as input to other selectors

First, we will install reselect and then change the ducks file by adding Reslect functionality.

Next, in the StudentList.jsx file, we need to change mapStateToProps.

Next, we should change StudentForm.jsx. Here we need to pass student id as a parameter to the reselect function.

You can download the source code for this application from GitHub.

ReactJS Duck Pattern

In our previous post we continued our implementation of ReactJS application with Redux. Now in our repository we have lots of folders. It is mainly due to separation of functionality. For example, we have actions and reducers. When we develop a component, we have to walk through different folders. Even, when the application become complex, we will have lot of files, which would eventually become difficult to navigate. Therefore, developers introduced Duck pattern, which we can use when we have a scaling ReactJS application.
In basic terms, Ducks is a proposal for bundling reducers, action types and actions when using Redux.
In ducks pattern, there are some predefined guidelines.

1. Must export default a function called reducer
2. Must export it's action creators as functions
3. Must have action types in the form of npm-module/reducer-name/ACTION_TYPE
4. May export it's action types as upper case, if an external reducer needs to listen to them, or if it is published reusable library

First we will create a constants file in config folder.

 

Then, create index.js file insider ducks/StudentList folder. In this file, we will define action types as constants. Action type value is defined according to the guidelines.

Next we will add actions into this file. Now we can delete our actions folder.

Next, we will add default function for the reducer. Now we can delete reducers folder.

With the above change, we must change our StudentList component.

Then we must modify ConfigStore.js file for student reducer.

Finally, we integrated the ducks pattern which will support us to scale our ReactJS application.

React JS Routing

In this post we will continue the application we created in our previous post and add path path based routing into to the application.
First, add a new Route for students like below.

Modify, StudentForm content like below.

Finally modify and remove unwanted code from StudentList file.

Start the application and you can browse through students using path based routing.

You can download the source code for this application from GitHub.

Create React app with Redux

In our previous blog post we create a basic react application. In this post, we will continue with that app. First we will integrate Font Awesome with our application.

Next we will add the actions for students.

Add the StudentForm file like below.

Modify the StudentList file by adding mapStateToProps and mapDispatchToProps.

Finally modify the student reducer file like below.

In your app, when you select a student, it will automatically update the student information section.

You can download the source code for this application from GitHub.

Create a React app by integrating Redux

First generate a ReactJS application using create react app utility.

After it generate successfully, you can start the application and browse through it.

Then we add required dependencies.

Next we are going to integrate Bootstrap with our project. Add Bootstrap style-sheet file and JavaScript files like below.

Next we should add a header for our application. We are going to add the header as a component.

In ReactJS, there are two main components. First one is smart component (containers) and the second one is dumb component (presentation component). Containers are very similar to components, except it aware about the state of the application. If you component is only use to display data, then make it a component.

As the Header will not aware about the application state, we will create the Header as a dumb component.

After that, we will create Home, StudentList and SubjectList containers.

Then we should create the store. In order to create the store, first we must create reducers like below.

After that, we will create the store.

Next we need to configure the router in App.js file.

Finally, we should bind the store with our application.

After you start your application, you will see a basic application in your browser.

Next we can enable Redux dev tools in our application.

You can download the source code for this application from GitHub.

ReactJS with Redux Router

In my previous post, I showed how to integrate Redux with ReactJS. In this post, we are going to implement routing with react-redux-router.
First, we need to install required node modules.

We must change our store accordingly.

Then we need to change index.js file to support routing functionality.

After that, we will add NavBar.jsx and Home.jsx.

Then change the app.js file like below.

Run the application.

You can find the source code in my GitHub repo.

ReactJS application with Redux

In my last post, I explained how to create a basic ReactJS application. In this post, I will explain how to integrate Redux with our application.
First, we need to install required npm packages.

Next, we will add a folder called reducers and inside that, we will create CourseReducer.js and StudentReducer.js files.

A reducer function needs two arguments state and action.

However, we need to initialize reducer function with our default state. Therefore, we need to modify our code in StudentReducer.js file.

Usually, redux application design is to have a single store. Thus, we will create store.js file inside store folder.

Next, we need to change index.js file like below.

After that, we need to modify CourseList.jsx file like below. connect is the function which integrates state management into React application.

We can further modify CourseList.jsx file like below.

Now, the StudentList.jsx file should look like below.

Use npm start command to run the application.

You can find the source code in my GitHub repo.