Quick Tech Bits - React-Redux integration

To integrate react and redux, the installation of the library "react-redux" is required. The redux library should also be installed

 C:\Your_Project_Directory\>npm install redux react-redux 

** The github link for a simple sample application on this integration is available at this link

 Summarizing integration between and redux

1. import {connect} from 'react-redux' 

   This import should be done inside the react component that wishes to use the Redux Store

2. Write 2 functions in the above react component

i. mapStateToProps(): It will map the redux store to props of the react component

      Here, redux will allow the creation of props dynamically through code

ii. mapDispatchToProps(): Will take a function called dispatch as its parameter. This function will dispatch (invoke) the action that will invoke the reducer that will change the redux state. The changed redux state will be assigned to the object key (addUser)

that will be returned as a prop to the react component.

3. Call connect(). Connect(mapStateToProps, mapDispatchToProps)(YourReactComponent)

   This function will connect react & redux.

4. In react application, assuming that App.js is the container component, we add the Provider tag

   to integrate everything to a specific store of redux.

Inside App.js  

 <Provider store={yourReduxStoreObject}>

   <YourReactComponent/>

</Provider> 

 

Approach for students / learners of new software technology

 When you create small applications while learning new technologies, use the following approach.

These steps are focussed on the .net technology. So if you are a beginner for .Net, then while practicing applications, use the following approach.

Notes:

Approach a requirement

1. Write it down in notepad. Take part of the requirement, break it down into classes, properties, methods. If there are multiple classes, check if the classes are related to each other.

2. At this stage, start the boiler plate code. This means, create the skeleton structure.

Eg: Create the classes, properties and empty functions as decoded in step 1.

3. Start coding the logic.

4. Write the logic to display the output in the correct file and project.

=================================================

APPROACH: If output is not as per expectation

ANSWER: DEBUG

To Debug in .Net using Visual Studio, place a breakpoint by clicking on the grey margin of the code editor in Visual Studio.

1. Place the breakpoint where you wish to assess the code output live.

2. Run your application. The execution will stop  at the breakpoint. Here you can hover over the individual properties, parameters, variables to see the live output value.

3. Use the following keyboard shortcuts to debug code

a. Fn + F10 : Debug the next line of code

b. Fn + F11 : Debug (Step) inside the function call

c. Fn + Shift + F10: You do not want to debug the code below, so you want to let the code execute normally and only start debugging after the current function execution completes. This is known as Step Out (Start debugging outside the existing function)

Modern SDLC - A peek into practical Agile

 Phases of SDLC

Lets see how a enterprise project can be worked upon as per Software Development Lifecycle (SDLC)

1. Discuss with Client

- Analysis: Convert Client requirements through examples into technical requirements

- O/p: Requirements Document: SRS - System Requirement Specification

2. Planning: PM comes out with an Estimation Document

- In an estimation document

- Total number of releases for the product

- Total Days required to Deliver

- Team size required

- Delivery Date

3. Implementation: Development

- Designing the Product

- How many modules

- Which Technologies to Use

- Classes, Projects,DBs, APIs

- HTML Wireframes

- Proof of Concept Applications created

- Coding : S.E

4. Testing

- Write all possible cases for a given requirement.

- All cases means: What is expected: Happy Case

   Loopholes / Bugs: Sad Case

5. Deployment

- Instruction Manuals for Client / Support Team

- Installation of the Product

- Servers & Security Certificates

- Configurations

======================================================================

But in today's fast paced world, where several companies would bid for a project, it becomes important to deliver fast which means within a short timeline.

The above process of SDLC, takes a long time (several months) to produce the final product (release to client).

The above SDLC process is also linear, which means, when the UI, development teams are at work, the QA (Quality Assurance Team) is not assigned to work. Parallel work environment is not possible with the traditional SDLC process

=======================================================================

SOLUTION:

AGILE: In this model, a product is delivered in several usable stable parts.

Hence multiple small and stable releases will be given to the client

Eg: Amazon.com delivered in 4 parts

V1: All requirements wrt Product Mgmt, Orders Mgmt, Payment Gateway Integration

V2: Additional requirements for Tracking of Orders

V3: Additional Requirements for Dropshipping and engagement

V4: Additional Requirements for Frachising

- Each Version will follow the Construction phase: Requirements Analysis -> Planning -> Design UI -> Develop

   -> Test -> User Acceptance (Client Acceptance) -> Release

- The cycle is known as SPRINT. Hence, in the above example, we can say there are 4 sprints.

- Requirements or deliverables identified by client will become User Stories

- The Large team is divided into Scrum Teams (smaller teams) each handling a collection of user stories

- Each team member of a single Scrum team will do analysis of assigned user story, work on the elements (parts)

  of a single user story, document the details of the user story and implement it.

- Each user story will have sub-stories (parts/elements) which will get assigned to specific team member

Eg: Product Management

- Create Product Page UI -- UI / Frontend Team member

- BLL -- Backend Developer

- Expected Results, how your module should work, workflow and technical descriptions -- QA Team 

member

- Operations Team member - manage Checkin/checkout, integration & deployment of code, configure