react
ASP.NET Core,  React

React with Redux, Get started, with ASP.NET Core

React with Redux is part 3 of a 5 parts React with ASP.NET Core series. This series will show you the setup necessary for building React single page application with routing and server-side rendering.

What is Redux? Official answer: Redux is a predictable state container for Javascript apps.

In other words, it is a single data store to manage and share data across your javascript app.

Why do we need Redux? In case of React, is to share data across multiple React components. For example, one React component may request and obtain data from the server. Redux data store will receive data updates through Redux’s actions & reducers. Redux store will then notify all connected React components about data update and the react components can then re-render if data needed has changed.

If the data is only consumed by a single component, React component’s state management would fit the bill. In a lot cases, multiple components would need the same piece of data (data sharing). That’s when Redux becomes handy.

The footprint is small and it also facilitates data hydration with server side rendering.

React with Redux, Get started

Goal: To run react with redux in a simple setup that obtains data from server and update the component.

Base project code: Example code from React with Typescript, Get started with ASP.NET Core would be the starting point. (Rendering a simple HelloWorld typescript component)

React with redux: project structure

Npm packages

Add the following 3 packages inside “dependencies” in file package.json

react-redux provides add-on connector to React components to obtain updates from Redux data store.

redux-thunk is a middleware for Redux to provide asynchronous logic. Usually used to trigger data fetching from server before invoking redux actions to update the data store. There are other technology like redux-saga that support asynchronous calls. But redux-thunk is a winner for me as it is simple, serves my purpose and it’s super small.

Actions and Reducers

Add file redux-actions.ts in folder Scripts with code below:

Actions are payloads of information that send data from your application to Redux data store. You send them to the store using Redux’s dispatch() method.

receiveHelloWorldData() method simply create an action object for use when you receive data from the server.

Next add file redux-reducers.ts in folder Scripts with code below:

Reducers specify how the application’s state changes in response to actions sent to Redux data store.

helloWorld_reducers() method is where you tell Redux how to update data store, by returning a new object representing the new state of the store.

Add Redux logics to React component

Let’s replace the file entry.tsx with following code:

This will create Redux store with the reducer defined earlier and use redux-thunk as middleware. Provider is the key React component that hooks up Redux data store with your React application.

Now create a new file async-thunks.ts as below:

retrieveData() is a thunk, which will dispatch receiveHelloWorldData() action with simulated data after 5 seconds.

Instead of returning an redux action object, it returns a function instead. When invoked using dispatch, Redux will pass this function to the middleware redux-thunk for execution, instead of triggering the reducers. It may look a little complex with all the type definitions. A thunk signature looks like below with plain javascript:

arg1, arg2 are your optional arguments, if any. You also have access to dispatch function so you can dispatch other actions and/or thunks in your logic. getState() method will return Redux data store object if you need to inspect any data.

Finally, update the HelloWorld component to connect with Redux and invoke the thunk retrieveData() when the component is mounting.

Build and run. You are now running react with redux.

 

Extra: Fetch data from server

A slight modification to show case actual data retrieval from server. Let’s add a simple api to HomeController by adding the following:

It simply returns an object of type IHelloWorldData when requested.

Now replace the thunk retrieveData() at async-thunks.ts

The function now calls fetch() to request data from the server. A promise is returned and when resolved with the data, it will dispatch the receiveHelloWorldData() action to update the data store.

Now build and run again. Data now come from the server.

 

Example code for React with ASP.NET Core series – Part 3 is available at Github.

More Read

React with ASP.NET Core series – Part 4: React with Server Side Rendering, Get started with ASP.NET Core

React with ASP.NET Core series – Part 2: React with Typescript, Get started with ASP.NET Core

Leave a Reply

Your email address will not be published.