In this post we will go through the basics concepts of React-Redux and also build a small task manager application. Before we start I hope you have some working knowledge of React Js.

Task Manager React-Redux

Task Manager Build in React-Redux

What is React-Redux?

Redux is a state management framework. It is most commonly used with libraries such as React or Angular for building user interfaces.
In React data transfer within the components is very messy as application grows it becomes difficult to track from which component data is coming from.
It solve this state transfer problem by Store where all state of the application takes place which makes store application level state.
We can access store from any component so there is no worries from where the data is coming from. It also make debugging easy.

Let’s Breakdown Redux

It can be broken down into the following:

Store:      as we stated earlier that store holds the state of the whole application.
Actions: are payloads of information that sends from your application to your store. The only source of                               information for store.
Reducers:  it specify the how the application’s state changes with responses to actions sent to the                                       store.
Middleware: it provides a way to interact with actions that have been dispatched to the store before they                                 reach the store’s reducer.

Redux adds a lot of complexity and boiler plate for simple tasks. Once we get its boiler plate this will make our life simple.

 Let’s code 

CLI commands to install react modules.

Now we will add couple of files and folders.

Redux Task Manager File Structure

Store.js

We will create our Store js file. which we will hold whole application’s state.

In this file we imported the createStore, applyMiddleware and compose from redux.

createStore : as its name suggest. it will help us to create a store.

applyMiddleware: it will let us use one or many middle ware together.

compose: it help us to compose middle ware and initialize the redux toolbar.

then we also imported thunk from the redux-thunk and rootReducer from reducers folder. thunk is the middle ware of the application and rootReducer is file where all reducers come and meet.

we created the IntialState which is equal to empty object, middleware which is an array so we can add other middle ware then we made a store in which call the createStore function where we pass our initalState, middleWare as the parameters.Where we use compose to compose middleWare and  redux devtools together.

In compose we pass middleWare In which we use spread operator so it allow us to iterate other middle ware if we have.

After that we export the store.

Reducers

In application we can have different type of reducers like post reducer, comment reducer, authentication reducer etc

In our application we have:-

Index.js

we create this file in reducers folder. which is meet and greet place for all reducers where we will combine all reducers.

Here we import combineReducers from redux which will combine all reducers. we are importing our itemReducer which will do specific tasks according to actions.

In export default combineReducers function which will turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

itemReducer.js

It which will do specific tasks according to actions.

we are importing the actions which will what task or action need to perform.

Every Reducer has its own intialState. In this intialState we define some tasks with id’s.

In this default function have two parameters first state which is equal to the intitalState and second is action which contains action type and action payload.

action type tells what type of task need to be perform and action payload brings the information of the tasks.

GET_ITEMS action returns the state.

DELETE_ITEM filters the task.id and action.payload.

ADD_ITEM Adds the action.payload in the state.

By Default it returns the state.

Actions

types.js

It exports the Action which we will perform by the reducer.

App.js

In this file we will import our components, also we will import Provider from React-Redux and store js file.

We will wrap around our application by Provider tag and we will add store attribute which is equal to our store we create.

By wrapping up, Store will be accessible by any component. we can access it as a props.

Header

It is stateless component which is only a header of the application.

Items.js

Some Import statements

We are importing Item which is another component which will show task one by one.

Connect from React-Redux which will  Creates a higher-order component for making container components out of base React components.

In connect we will pass Two functions as param

first mapStateToProps : it is a utility which helps your component get updated state(which is updated by some other components), it returns a porps object.


In above code state.item.tasks  where item is the object of the combineReducers. 

mapDispatchToProps: It  is a utility which will help your component to fire an action event (dispatching action which may cause change of application state)

In this class we accessing the our data as  a props.

Connect is passing both function and also the base class.

Item.js

Similar to our previous component we will import action and connect.

In this time we have payload in which we returning id of the task.

In connect first argument is null because we are not accessing the store. we are only dispatching the method.

InputForm.js

It is also similar to our both comment. In this we importing uuid which we can install by npm.

which will help us to create id for our tasks.

In this above code we are returning our new item as payload.

We are not passing mapStateToProps so in connect first param is null because we are not accessing the store.

Conclusion

In this post we go through the some of the basics concept of the Redux like store, actions and reducers.
Source code of this application is here. visit our gitHub page.

Redux boiler plate and setup is complex and it can make you down to stop learning but it will make easier as our project grows. The more you use, the more habit will be.

Thanks for Reading! Hope you like it.

 

 

 

 

 

 


Suraj Sharma

Developer who never forgets semicolon.

1 Comment

varun · October 10, 2018 at 1:24 pm

Great Article, keep up with good work

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: