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)
Npm packages
Add the following 3 packages inside “dependencies” in file package.json
|
1 2 3 |
"redux": "4.0.0", "react-redux": "5.0.7", "redux-thunk": "2.3.0" |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export interface IHelloWorldData { // type definition of data that component HelloWorld would receive status: string; count?: number; } export const RECEIVE_HELLOWORLD = 'RECEIVE_HELLO_WORLD'; export function receiveHelloWorldData(data: IHelloWorldData) { return { type: RECEIVE_HELLOWORLD, data }; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { AnyAction } from 'redux'; import { RECEIVE_HELLOWORLD, IHelloWorldData } from './redux-actions'; const initialState: IHelloWorldData = { status: '' }; export function helloWorld_reducers(state: IHelloWorldData = initialState, action: AnyAction) { switch (action.type) { case RECEIVE_HELLOWORLD: return { ...state, ...action.data } default: return state; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
import * as React from 'react'; import { render } from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import { helloWorld_reducers } from './redux-reducers'; import { HelloWorld } from './HelloWorld'; var Store = createStore(helloWorld_reducers, applyMiddleware(thunk)); render(<Provider store={Store}><HelloWorld /></Provider>, document.querySelector('body')); |
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:
|
1 2 3 4 5 6 7 8 9 |
import { receiveHelloWorldData } from './redux-actions'; export function retrieveData() { return (dispatch: <T>(action: any) => T, getState: () => any) => { setTimeout(() => { dispatch(receiveHelloWorldData({ status: "Data received", count: 5 })); }, 5000); } } |
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:
|
1 2 3 4 5 6 7 |
function funcName(arg1, arg2, ...) { return function(dispatch, getState) { ... your logic here } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import * as React from 'react'; import { connect } from 'react-redux'; import { retrieveData } from './async-thunks'; import { IHelloWorldData } from './redux-actions'; interface Props_redux extends IHelloWorldData { dispatch: <T>(action: any) => T } interface IState { } class Comp extends React.Component<Props_redux, IState> { componentDidMount() { if (!this.props.status) this.props.dispatch(retrieveData()); // only get data when it's not available } render() { const { status, count } = this.props; var content = null; if (status) { content = [ <div>Data obtained from server:</div>, <div>Status: {status}</div>, <div>Count: {count}</div> ]; } return <div>Hello world!{content}</div>; } } export var HelloWorld: React.ComponentClass<{}> = connect(state => { return { ...state }; })(Comp); |
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:
|
1 2 3 4 5 |
[HttpGet] public IActionResult GetHelloWorldData() { return new ObjectResult(new { status = $"Successful: at {DateTime.Now.ToShortTimeString()}", count = 10 }); } |
It simply returns an object of type IHelloWorldData when requested.
Now replace the thunk retrieveData() at async-thunks.ts
|
1 2 3 4 5 6 7 8 |
export function retrieveData() { return (dispatch: <T>(action: any) => T, getState: () => any) => { fetch('/Home/GetHelloWorldData', { method: 'get' }) .then(response => response.json()) .then((data: IHelloWorldData) => dispatch(receiveHelloWorldData(data))) .catch(() => { }); // ignore errors in this example } } |
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
