This blog explains about how to change the Font size throughout the app using redux. To do that we should have basic knowledge about the fundamental building blocks of the redux those are actions, store, reducers.
To start with we should create a react app
npx create-react-app redux-example
Now go to the root of the project by using the below command
cd redux-example
install react redux by using the command
npm install react-redux
Action: Actions are payloads of information that send data from the application to store. The only way to change the state is by information data to store. We send the information to the store using store.dispatch(). Actions are plain JavaScript objects. Actions have a ‘type’ property that indicates the type of action being performed type property is a string.
Create a new directory with the name actions in that create a new file index.js.
export const FONT_SIZE = ‘FONT_SIZE’;
export function addArticle(payload) {
return { type: ‘FONT_SIZE’, payload };
}
Reducer: It is a javascript function. It takes two parameters: the current state and action. Reducers calculate a new state given by the previous state and an action.
Create a new directory reducer in that create a new file index.js
const initialState = {
fontsize: ’20px’
};
function rootReducer(state = initialState, action) {
if (action.type === FONT_SIZE) {
return Object.assign({}, state, {
fontsize: action.payload ? action.payload : state.fontsize
});
}
return state;
};
export default rootReducer;
Initially action.payload will be empty, so here we are declaring font-size value ‘20px’. If the state changes then will get value from action.payload.
Store: Store is the object. It holds the application state. We will have only a single store in a Redux application. Whenever we want to split the data we use a reducer instead of using many stores.
Create a new directory store in that create a new file index.js
import { createStore } from “redux”;
import rootReducer from “../reducer/index”;
const store = createStore(rootReducer);
export default store;
Provider: We need a provider for connecting with redux. It is a high order component from react-redux. Provider wraps up your React application and makes it aware of the entire Redux’s store.
We have to modify the index.js as below
import * as serviceWorker from ‘./serviceWorker’;
import React from “react”;
import { Provider } from “react-redux”;
import store from “./Store/index”;
import App from “./App”;
render(
< provider ” store={store}>
< App/ >
< Provider/ >
,
document.getElementById(“root”)
);
serviceWorker.unregister();
Change the app.js file with the following code
import React, { Component } from “react”;
import { connect } from “react-redux”;
import { addArticle } from “./actions/index”;
import Slider from ‘rc-slider’;
import ‘rc-slider/assets/index.css’;
const mapStateToProps = state => {
let fontsize = parseInt(state.fontsize.substring(0, 2));
return { fontValue: fontsize, fontsize: state.fontsize };
};
function mapDispatchToProps(dispatch) {
return {
changefontsize: size => dispatch(addArticle(size))
};
}
class Data extends Component {
constructor(props) {
super(props);
this.state = {
fontValue: 14
}
}
handleFontSize = (value) => {
this.setState({ fontValue: value })
let fontValue = (value).toString() + ‘px’;
this.props.changefontsize(fontValue);
}
render() {
const { fontsize } = this.props
return (
< div style={{ width: ‘50%’, }}>
< Slider
min={0}
max={100}
step={1}
value={this.state.fontValue}
onChange={(value) => this.handleFontSize(value)}
/>
< p style={{ fontSize: fontsize }} >Welcome To ReactJs< /p >
< /div >
)
}
}
const App = connect(mapStateToProps, mapDispatchToProps)(Data);
export default App;
In the above code To connect with redux we have react-redux. In this we need just one more method to connect. It connected the react component with the redux store. We connect with two or more arguments depending on the use case.
mapStateToProps: It connects a part of the react state to the props of the react component.By this react component will have access to the exact part of the store it needs.
Install the slider component by using the below command
npm i rc-slider
We will get the fontvalue from the state. In the above code, we returned two variables one is fontsize for displaying in inline styles and the other is fontValue for displaying the value in the slider component. Whatever value getting from the state is assigned to the fontSize variable that is assigned in < p style={{ fontSize: fontsize }} >tag. Fontsize is the value that changes every time while handling the slider component.
mapDispatchToProps: To change state in action we need to dispatch an action. It Connects redux action to react props. So that react component will send a message to the store, then changes the state in action.
Whenever we are sliding the component, this.props.change fontsize method triggers and sends the value to the store.
