How to use React with Redux?
This KB article explains how to create our React components in Redux.
Step 1: Create a React project using the following command.
npx create-react-app react-app
Step 2: Install the Syncfusion React packages to render the Syncfusion components.
All Syncfusion React (Essential JS 2) packages are published in the npmjs.com public registry. You can choose a component that you want to install. In this application, the grid component is used.
To install the grid component, use the following command.
npm install @syncfusion/ej2-react-grids --save
Step 3: Install the React Redux package for using all Redux functionalities in your application.
React bindings are not included in Redux by default. You need to install them explicitly.
npm install --save react-redux
Step 4: Redux is composed of the following components. So, you need to set them first to create React with Redux. In our demo, an EJ2 Grid is created, and based on the input search, filtering actions will be taken in the Grid.
Actions and Action creators – We often use actions and action creators interchangeably, but they are two different entities. Actions are payloads of information, which sends data to the store, and they are JavaScript objects. What makes a particular action unique is an action that must have a type key. The type indicates the type of action is performed.
On the other hand, action creators are functions that create actions, and they simply return actions. This action creators will be defined in the actions folder in src as demonstrated below.
/* src/actions/index.js*/
export const filter = (text) => ({
type: 'FILTER',
text
})
Reducer – This describes how an application state will change with respect to actions given to the Redux store. Now, create the reducers folder in src, and then define reducers for our app actions (i.e., filtering) as demonstrated below.
/* src/reducers/dynamicgridreducer.js*/
import { data } from '../components/data';
const dynamicFilter = (state = data, action) => {
debugger
switch (action.type) {
case 'FILTER':
return state.filter((o) => o.CustomerID.toLowerCase() === action.text.toLowerCase());
default:
return state
}
}
export default dynamicFilter
Using the combineReducers utility from Redux, you can combine all reducers in an app into a single index reducer. Hence, for this project, reference our dynamicgridreducer to the rootReducer. In the reducers folder, create the rootReducer.js file and import all the reducers for our app actions.
/* src/reducers/rootReducer.js*/
import { combineReducers } from 'redux'
import dynamicFilter from './dynamicgridReducer';
const todoApp = combineReducers({
dynamicFilter
})
export default todoApp
Store – Redux uses ‘Store’ for storing an application’s entire state at one place. So, all the components’ states are stored in the Store, and they receive updates from the Store itself. A Redux application needs only one store.
Now in the src folder, create the store.js file, and then configure the Redux store. Refer to the following code snippet for creating store in root index.js or in store.js file.
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers/rootReducer'
const store = createStore(reducer);
store.subscribe(() =>
console.log(store.getState())
)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
In this code, pass our reducers to the Redux createStore function, which returns a store object.
This ensures that any time we connect to Redux in our app via React-Redux connect, the store is available to our components.
Step 5: React Redux provides a connect function to connect your component to the store. Normally, call to connect as demonstrated in the following code snippet.
/* src/containers/DynamicGrid.js*/
const stateToProps = state => {
return {
data: state.dynamicFilter
}
}
DynamicGrid = connect(stateToProps)(DynamicGrid)
Step 6: Refer to the following code snippet in a component to event binding on the input and to do Grid filtering in Redux.
/* src/containers/DynamicGrid.js*/
let DynamicGrid = ({ data, dispatch }) => {
let input
return (
<div>
<input ref={node => {
input = node
}} />
<button onClick={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(filter(input.value))
input.value = ''
}}>
Filter
</button>
<GridComponent dataSource={data} enableVirtualization={true} allowResizing={true} height = {300}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='170'></ColumnDirective>
<ColumnDirective field='CustomerID' width='150'></ColumnDirective>
<ColumnDirective field='OrderID' width='170'></ColumnDirective>
<ColumnDirective field='ShipName' width='150'></ColumnDirective>
<ColumnDirective field='ShipCity' width='170'></ColumnDirective>
<ColumnDirective field='ShipAddress' width='150'></ColumnDirective>
<ColumnDirective field='ShipRegion' width='170'></ColumnDirective>
<ColumnDirective field='ShipPostalCode' width='150'></ColumnDirective>
<ColumnDirective field='ShipCountry' width='170'></ColumnDirective>
<ColumnDirective field='Freight' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll, Resize]} />
</GridComponent>
</div>
)
}
Step 8: Refer the following command to run the application.
npm start
You can download the sample.
I hope you enjoyed learning about how to use React with Redux.
You can refer to our React feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
