React-Js Development For Steemit | React Redux | Steem Alliance Community.

Hello Everyone,

How are you guys, I hope members of Steem alliance will be well and good, by the grace of God, I am also feeling well. My responsibility in this community is as a development manager. I have started the consistently tutorial base program to spread the knowledge of programming and development.

In the last post, I shared the knowledge about React hooks. In this tutorial, I have selected the topic “React Redux”. after the successful completion of react I will design a front end of steemit with extra features by using SDS API and steem js library.

React Redux.
React redux is the javascript liberary. it is used to manage the state in react website. useState hooks is also use for mananging the state of function component. but react redux is work in different prospectives and in different way.React redux is the important and popular part of react and use in wide range to maintain the state in every project. i will give a simple example to explain the thing in perfect way. for example, we login in any website and perform the different task then we refresh the page but login account is not automatically sign out with refreshing the page. this activity is manage and control by react redux. it store and manage the account state. React reduc store and manage the state in a centralized store instead of storing the state into many parts.

With the help of Redux, state changes in the react website become more predictable. it is based on specific rules and pattrens to avoid the conflicts to maintain the react websites. React Redux is used to develop user interface (UI). it allow the react to read the whole data from a specific centralized store. React redux is based on the priciples of Flux. The react redux library helps to connect with react components to access the redux store and provide state to the components as props.To use React Redux, First of all, we need to install and configure the react redux library.

React redux Installation

npm install redux react-redux

React Redux is based on "connect" function that help to integrate with redux store. this function is basically works with mapStateToProps and mapDispatchToProps functions which helps to dispatching the actions from the redux store to modify the state.

Create a new file called "App.js"

import React from 'react';
import { connect } from 'react-redux';
import { toggleContent } from './actions';

const App = ({ content, clickme }) => {
  return (
    <div>
      <h1>I love {content}</h1>
      <button onClick={clickme}>Button</button>
    </div>
  );
};

const mapStateToProps = state => ({
  content: state.content
});

const mapDispatchToProps = {
  clickme
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Create another file called "actions.js"

export const clickme= () => {
  return {
    type: 'CONTENT'
  };
};

Create a new file called "reducer.js"

const initialState = {
  content: 'Steemit'
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CONTENT':
      return {
        content: state.content === 'Steemit' ? 'Hive' : 'Steemit'
      };
    default:
      return state;
  }
};

export default reducer;

In your main component import the necessary dependencies.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';
import reducer from './reducer';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

The above example will show the "I Love Steemit" with a button on the screen. by clicking the button will toggle between displaying "I Love Steemit" or "I Love Hive" to display. Redux is used in the above code to manage the state. i hope you will understand by focusing and consuntration. for any further query, please contect me on discord or in the comment section below.

Please cast witness vote to @bangla.Witness or set proxy to @rme.

_
Vote @bangla.witness as witness
Set Proxy @rme as proxy

Special Thanks.

Cc: @rme
Cc: @hungry-griffin
Cc: @stephenkendal

Thanks for giving your precious time to my post.
Follow | Upvote | Share | Comments
Follow me on Instagram.
Instagram

🆃🅷🅰️🅽🅺 🆈🅾️🆄