为 Twitch 扩展响应 redux 操作

如何解决为 Twitch 扩展响应 redux 操作

我在 Redux 下分派动作时遇到了一些问题。

我已经将不同的教程应用到这封信中，但这并没有用，我的道具中总是有一张空桌子。

这是我的代码：

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
);

商店

    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;
    }
}

我的行动：

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);
            });
    };
};

最后，我的 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);

预先感谢您的帮助

解决方法

您不需要在创建商店时分派 fetchWalletAddress，您可以在组件中执行此操作。此外，当您在组件中调用 fetchWalletAddress 时，请确保使用您通过 connect 的 mapDispatchToProps 参数提供给组件的函数，否则它不会影响 redux 存储

你必须做的另一件事是不要在同一个函数调用中使用更新的 redux 值，因为它需要一个渲染周期来反映更新的更改

store.js

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'

import rootReducer from './reducers'


const store = createStore(rootReducer,applyMiddleware(thunk))


export default store;

Configpage.js

...

componentDidMount(){
    this.props.fetchWalletAddress();
    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)
        })
    }
}

...
componentDidUpdate(prevProps) {
    if (!_.isEqual(prevProps.wallet,this.props.wallet)) {
       this.twitch.rig.log(this.props.wallet)
    }
}
...

onSubmitForm(){
    this.props.fetchWalletAddress();// use action from props
}
...
const mapDispatchToProps = {
    fetchWalletAddress,}
const mapStateToProps  = state => {
    return {
        wallet: state.wallet
    }
};

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