Question

我正在尝试从商店中调用API以更新组件的状态，从而获得加密货币的价格。

我返回一个状态的副本（此处为nextState），nextState的日志很好地填充了商品价格，但我的组件仅获取了initialState。

这里的代码：

我的组件

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground,TouchableOpacity, Image } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import { connect } from 'react-redux'

class Bitcoin extends React.Component {
   constructor(props){
     super(props);
     this.state = {
    }
    }

componentDidMount() {
    const action = { type: 'PRICES', value: this.state.cryptos}
    this.props.dispatch(action)
    console.log(this.props.cryptos)
}

componentDidUpdate() {
    console.log("Component did Update : ")
    console.log(this.props.cryptos)
}

  render() {
return (
    <View>
        <Text style={styles.title}>Bitcoin !</Text>
        <Text> {this.props.cryptos[0].price} </Text>
    </View>
)
  }
}

const styles = StyleSheet.create({
title: {
    marginTop: wp("10%")
},
});

const mapStateToProps = (state) => {
return {
    cryptos: state.Crypto.cryptos
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch: (action) => { dispatch(action) }
}
}

export default connect(mapStateToProps, mapDispatchToProps)(Bitcoin)

我的减速机：

const initialState = {  cryptos: [
                    {
                        title: "Bitcoin",
                        id: "BTC",
                        price: 0
                    }, {
                        title: "Ethereum",
                        id: "ETH",
                        price: 0
                    }, {
                        title: "Ripple",
                        id: "XRP",
                        price: 0
                    }], toast: 0}

function Crypto(state = initialState, action) {
    let nextState
    switch (action.type) {
      case 'PRICES':
        nextState = {...state}
        fetch('https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH,BTC,XRP&tsyms=EUR&api_key=c3b60840403013f86c45f2ee97571ffdf60072fafff5c133ed587d91088451b6')
        .then((response) => response.json())
        .then((responseJson) => {
            nextState.cryptos[0].price = responseJson.BTC.EUR.toString()
            nextState.cryptos[1].price = responseJson.ETH.EUR.toString()
            nextState.cryptos[2].price = responseJson.XRP.EUR.toString()
            console.log("NextState :");
            console.log(nextState.cryptos);
            return nextState
        })
        .catch((error) => {
            console.error(error);
        });
        return nextState
    case 'TOAST':
        nextState = {...state}
    default:
        return state
    }
}

export default Crypto

Answer 1

欢迎使用StackOverflow。我想您是Redux工作流程的新手。所以就在这里。

动作描述动作。减速器接收动作并指定商店的更改方式。

动作必须是纯JavaScript对象。减速器函数必须为pure！

这是减速器内部禁止执行的操作：

@Service
public class TransactionManagerImpl implements TransactionManager {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    String txnLogFile;

    @ConstructorProperties({"txnLogFile"})
    public TransactionManagerImpl(String txnLogFile) {
        this.txnLogFile= txnLogFile; 
    }

}

在您的示例中，通过调用fetch。您正在进行API调用。

我邀请您阅读本指南以了解更多信息：如何将API调用和异步引入您的redux应用程序。（https://redux.js.org/advanced/async-actions）

Redux商店不会更新组件道具

1 个答案: