Description
The issue is that when my app reads from the contract it stores data in react state and it is
also displayed but when i refresh the page the value on the front end that is shown
for the states reverts to the default values but redux states still has the updated values
Redux Store
import { createStore } from "redux";
const redux = require('redux');
const initialState = {
auction_owner:"0x99",
auction_contract:{},
connected_account:"0x11"
}
const TaskReducer = (state = initialState,action)=>
{
if(action.type==="setAuctionOwner"){
state.auction_owner = action.obj;
}
else if(action.type==="setAuctionContract"){
state.auction_contract = action.obj;
}
else if(action.type==="setConnectedAccount"){
state.connected_account = action.obj;
}
return state;
};
const store = createStore(TaskReducer);
const TaskSubscriber = () =>{}
export default store;
React Part
import Web3 from "web3";
import Auction from './truffle_abis/Auction.json';
import { Component} from 'react';
import { connect } from "react-redux";
import ReduxMain from './Components/Redux/ReduxMain';
class Block extends Component{
async UNSAFE_componentWillMount(){
await this.LoadWeb3();
await this.LoadBlockChain();
}
LoadWeb3 = async()=>{
if(window.ethereum)
{
window.web3 = new Web3(window.ethereum);
await window.ethereum.enable();
}
else if(window.web3)
{
window.web3 = new Web3 (window.web3.currentProvider)
}
else{
window.alert('No Wallet Detected');
}
}
LoadBlockChain=async()=>{
const web3 = window.web3
const account = await web3.eth.getAccounts(); // getting account that is connected
this.setState({connected_account:account}); // set current metamask account to state
this.props.Redux_setConnectedAccount("setConnectedAccount",account); // save to Redux
//Ganache Network ID
const networkID = await web3.eth.net.getId();
//Loading Contract
const ContractData = Auction.networks[networkID];
if(ContractData){
const cont_addr = new web3.eth.Contract(Auction.abi,ContractData.address);
this.setState(this.state.auction_contract=cont_addr); // get contract and store it to state
this.props.Redux_setContract("setAuctionContract",cont_addr); // save to Redux
this.GetAuctionOwner(); // get the address of the account that deployed the contract
}
else
{
console.log("NoData");
}
}
GetAuctionOwner = async ()=>
{
const addr = await this.state.auction_contract.methods.GetOwner().call(); // get address from contract
this.setState({auction_owner:addr}); // set owner address to state
this.props.Redux_setOwner("setAuctionOwner",addr); // save to redux
}
constructor(props){
super(props)
this.state={
auction_owner : '0x00',
auction_contract:{},
connected_account:'0x00'
};
}
render(){
return(
<p>App Page</p>
<div className='Owner_addr'>
<p>Owner : {this.props.owner_acc_store}</p>
</div>
<div className='Owner_addr'>
<p>CC : {this.props.connected_acc_store}</p>
</div>
</div>
);
}
}
const mapStatetoProps=(props)=>{
return{
owner_acc_store : props.auction_owner, // get state from redux
connected_acc_store:props.connected_account
}
}
const mapPropstoState =(dispatch)=>{
return{
Redux_setOwner :(type,obj)=>dispatch({type,obj}), // set state in redux
Redux_setContract :(type,obj)=>dispatch({type,obj}), // set state in redux
Redux_setConnectedAccount :(type,obj)=>dispatch({type,obj}) // set state in redux
}
}
export default connect(mapStatetoProps,mapPropstoState)(Block);