Redux 商店不更新组件道具答案

【问题标题】：Redux store doesn't update component propsRedux 商店不更新组件道具
【发布时间】：2019-03-20 18:32:24
【问题描述】：

我正在尝试从我的商店调用 API 来更新组件的状态，这里获取加密货币的价格。

我使用我的状态的克隆作为回报（此处为 nextState），并且 nextState 的日志很好地填充了商品价格，但我的组件仅获得了初始状态。

这里是代码：

我的组件

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

【问题讨论】：

您当前的方法与 redux 背道而驰。 Reducer 函数必须是纯函数。这里不允许有副作用。您应该将网络相关代码放置到组件本身或使用 thunk 中间件的操作创建者。

标签： redux react-native-android

【解决方案1】：

欢迎来到 StackOverflow。我猜你是 Redux 工作流程的新手。就是这样。

动作描述一个动作。 reducer 接收 action 并指定 store 的变化方式。

Action 必须是纯 javascript 对象。而reducer函数必须是pure！

减速器内部禁止做什么：

  Mutate its arguments;
  Perform side effects like API calls and routing transitions;
  Call non-pure functions, e.g. Date.now() or Math.random().

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

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

【讨论】：