I am having some problems with the dispatch of an action under Redux.
I have applied the different tutorials to the letter, but yet this does not take, I always get an empty table in my props.
Here is my code:
Config.js
import React from "react"
import ReactDOM from "react-dom"
import { Provider } from 'react-redux'
import store from './store'
import ConfigPage from "./components/ConfigPage/ConfigPage"
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<ConfigPage />
</Provider>,
rootElement
);
Store
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
import { fetchWalletAddress } from './actions/index'
const store = createStore(rootReducer, applyMiddleware(thunk))
store.dispatch(fetchWalletAddress());
export default store;
Reducer wallet.js
import { GET_WALLET_ADDRESS } from "../actions/actionTypes.js";
const initialState = {
wallet:[]
}
export default function(state = initialState, action){
switch(action.type){
case GET_WALLET_ADDRESS:
return [ ...state, ...action.payload];
default:
return state;
}
}
My action :
import {GET_WALLET_ADDRESS} from './actionTypes.js'
import axios from 'axios'
const apiUrl = 'https://api.elrond.com/accounts/erd15qltd5ccalm5smmgdc5wnx46ssda3p32xhsz4wpp6usldq7hq7xqq5fmn6';
export const fetchWalletAddress = () => {
return (dispatch) => {
return axios.get(apiUrl)
.then(response => {
return response.data
})
.then(data => {
dispatch({
type: GET_WALLET_ADDRESS,
payload: data
})
})
.catch(error => {
throw (error);
});
};
};
And for finish, my Configpage.js
import React from 'react'
import Authentication from '../../util/Authentication/Authentication'
import './Config.css'
import { connect } from 'react-redux'
import { fetchWalletAddress } from '../../actions/index'
class ConfigPage extends React.Component{
constructor(props){
super(props)
this.Authentication = new Authentication()
//if the extension is running on twitch or dev rig, set the shorthand here. otherwise, set to null.
this.twitch = window.Twitch ? window.Twitch.ext : null
this.state={
finishedLoading:false,
theme:'light',
isVisible:true,
wallet_address:'erd15qltd5ccalm5smmgdc5wnx46ssda3p32xhsz4wpp6usldq7hq7xqq5fmn6'
}
this.walletAddressHandler = this.walletAddressHandler.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
walletAddressHandler(event){
this.setState({
[event.target.name]:event.target.value
});
}
onSubmitForm(){
fetchWalletAddress();
this.twitch.rig.log(this.props.wallet)
}
contextUpdate(context, delta){
if(delta.includes('theme')){
this.setState(()=>{
return {theme:context.theme}
})
}
}
visibilityChanged(isVisible){
this.setState(()=>{
return {
isVisible
}
})
}
componentDidMount(){
this.twitch.rig.log(this.props.wallet)
if(this.twitch){
this.twitch.onAuthorized((auth)=>{
this.Authentication.setToken(auth.token, auth.userId)
if(!this.state.finishedLoading){
// if the component hasn't finished loading (as in we've not set up after getting a token), let's set it up now.
// now we've done the setup for the component, let's set the state to true to force a rerender with the correct data.
this.setState(()=>{
return {finishedLoading:true}
})
}
})
this.twitch.listen('broadcast',(target,contentType,body)=>{
this.twitch.rig.log(`New PubSub message!\n${target}\n${contentType}\n${body}`)
// now that you've got a listener, do something with the result...
// do something...
})
this.twitch.onVisibilityChanged((isVisible,_c)=>{
this.visibilityChanged(isVisible)
})
this.twitch.onContext((context,delta)=>{
this.contextUpdate(context,delta)
})
}
}
componentWillUnmount(){
if(this.twitch){
this.twitch.unlisten('broadcast', ()=>console.log('successfully unlistened'))
}
}
filterFloat(value) {
if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
.test(value))
return Number(value);
return NaN;
}
render(){
if(this.state.finishedLoading && this.state.isVisible){
return (
<div className="App">
<div className={this.state.theme === 'light' ? 'App-light' : 'App-dark'} >
<p>Add your wallet address</p>
<input
name="wallet_address"
type="text"
onChange={this.walletAddressHandler}
value={this.state.wallet_address}>
</input>
<p>{this.props.wallet.username}</p>
<button OnClick={this.onSubmitForm}>Try it</button>
<ul>
{this.state.wallet ? String((Number(this.state.wallet.balance) * Math.pow(10, -18)).toFixed(4)) : null}
</ul>
</div>
</div>
)
}else{
return (
<div className="App">
</div>
)
}
}
}
const mapStateToProps = state => {
return {
wallet: state.wallet
}
};
export default connect(mapStateToProps, null)(ConfigPage);
thank you in advance for your help
