The first question that comes to mind is what is state?
Think of state as the condition of your app at any specific time. It answers questions like:
- Is my textbox filled?
- Is the current user logged in?
A state holds variables that define an application's condition and therefore needs to be managed. That's where redux comes in.
Redux offers a predictable state container for javascript apps.
Glossary
- Reducer: specifies state changes in response to actions performed on the app.
- Action: Actions are payloads of information that send data from your application to your store. They are the only source of information for the store
Gettings Started/ Installations
Assumptions
- You have working knowledge:
- React
- Ionic
- Typescript
- NPM
Start by installing Redux into your existing ionic-react app:
npm install
npm install
For the purpose of structure and maintainability, we would be taking an opinionated approach and hence be installing redux toolkit. Redux toolkit allows for easy debugging and helps in structuring your application store.
npm install --save @reduxjs/toolkit
npm i -D @types/react-redux
npm install --save-dev @types/webpack-env
The last command above helps fix an issue with webpack and module.hot as would be seen further down.
Our redux folder structure:
- actions
- reducers
- store.ts
Let the work begin
reducers/index.ts
import { combineReducers } from "@reduxjs/toolkit";
const rootReducer = combineReducers({});
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;
This file serves as the single point of export of all the reducers.
The empty object in const rootReducer = combineReducers({}); would contain the reducers to be exported.
store.ts
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducers";
const store = configureStore({
reducer: rootReducer
});
if (process.env.NODE_ENV === "development" && module.hot) {
module.hot.accept("./reducers", () => {
const newRootReducer = require("./reducers").default;
store.replaceReducer(newRootReducer);
});
}
export type AppDispatch = typeof store.dispatch;
export default store;
This handles creating the store as well as its initialization. The first block handles bootstrapping the store with the reducer.
The second block handles hot reloading/ compiling, allowing re-importing the new version of the root reducer function whenever it's been recompiled. It also tells the store to use the new version instead.
We would be making changes to the index.ts file (Entrypoint to the app) to use the store.
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import * as serviceWorker from "./serviceWorker";
const render = () => {
const App = require("./App").default;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
};
render();
if (process.env.NODE_ENV === "development" && module.hot) {
module.hot.accept("./App", render);
}
serviceWorker.unregister();
A provider is added to make the Redux store available to connect() calls in the component hierarchy.
Creating an action - reducer
We would be creating an action - reducer combination that controls a simple loading screen and alert dialog.
action/uiel.ts
import { createAction } from "@reduxjs/toolkit";
interface Loader {
isLoading: boolean;
}
interface Alert {
isVisible: boolean;
message: string;
}
export const setLoader = createAction("LOADER", function prepare(
loader: Loader
) {
return {
payload: loader
};
});
export const setAlert = createAction("ALERT", function prepare(alert: Alert) {
return {
payload: alert
};
});
reducers/uiel.ts
import { createReducer } from "@reduxjs/toolkit";
import { setLoader, setAlert } from "../actions/uiel";
const loader = {
isLoading: false
};
const alert = {
isVisible: false,
message: ""
};
export const UielReducer = createReducer(
{ loader, alert },
{
[setLoader.type]: (state, action) => ({
...state,
loader: { ...action.payload }
}),
[setAlert.type]: (state, action) => ({
...state,
alert: { ...action.payload }
})
}
);
In the createReducer method call, the first argument is a JSON object representing the initial state followed by a JSON of methods for mutation. The keys for these methods are gotten from the action types. A mutation takes the initial state and action which contains a payload as parameters.
With the action and reducer above, the reducer would be imported into reducers/index.ts in the combineReducers function call as seen below:
import { combineReducers } from '@reduxjs/toolkit';
import { UielReducer } from './uiel';
const rootReducer = combineReducers({
uiel: UielReducer
});
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;
Now, we have Redux setup. Let's try dispatching some actions and getting values from the state. We would be creating a HomePage component.
components/HomePage.ts
import React from 'react';
import { connect } from 'react-redux';
import { setLoader } from '../actions/uiel';
const HomePage: React.FC = (props) => {
useEffect(() => {
setTimeout(() => props.dispatch(setLoader({ isLoading: true })), 2000);
},[])
return (
{props.isLoading?
<div>
<p>The page is loading... Please wait.</p>
</div> :
null
}
)
}
export default connect((props: any) => ({
isLoading: props.uiel.loader.isLoading
}))(HomePage);
The HomePage component's props is injected with {isLoading: props.uiel.loader.isLoading} and a dispatch object. Store value for loading can be retrieved by calling props.isLoading while an action can be dispatched by calling props.dispatch with an action passed in as a parameter as seen in the code snippet above.
If you need a website for your business, web or mobile application, head over to https://zhaptek.com and let's get talking or sign up as a referral and get 10% for every successful client referred. 😊
Leave comments below! 😊
