Не могу выбрать / изменить значение магазина -REDUX (React Native)

Question

Я новичок в редуксе

Я просто хочу показать значение на нескольких экранах.Мне нужно обновить и отобразить значение магазина после OnPress.

Мой магазин

import { createStore } from "redux";

// const rootReducer = () => {

// }


import rootReducer from "../reducers/index.js";


export default store = createStore(rootReducer);

Мой балансировщик

const BalanceReducer = (state = '0', action) => {
    switch (action.type) {
        case 'UPDATE_BAL':
            return state
        default:
            return state

    }

}

export default BalanceReducer;

Мой компонент

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';
import { connect } from "react-redux";

class StartPage extends Component {



    _UpdateBal = () => {
        const text = 30;
        this.props.dispatch({ type: 'UPDATE_BAL', text });
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.welcome}>Current Balance : {this.props.balance} </Text>

                <Button title={'Update Balance'} onPress={this._UpdateBal} />
                <Button title={'Login ->'} onPress={() => this.props.navigation.navigate('login')} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export default connect()(StartPage);

Дайте мне знать, где я делаю неправильно.Я не могу получить значение this.props.balance, и действие отправки, похоже, тоже не обновляется.

Answer 1

Я не вижу внутри вашего rootReducer, поэтому я предполагаю, что вы правильно регистрируете свой редуктор баланса.Но в вашем редукторе Balance ваше действие UPDATE_BAL на самом деле ничего не делает - оно просто возвращает состояние, равное '0'.Обратите внимание, что это строка со значением «0», а не число со значением 0 .В вашем компоненте вы хотите установить баланс в виде числа.Чтобы это исправить, вы можете сделать следующее:

const BalanceReducer = (state = 0, action) => {
    switch (action.type) {
        case 'UPDATE_BAL':
            return state + action.text //add the action's value (which you send over from your component) to the stored value
        default:
            return state
    }
}

export default BalanceReducer;

Кроме того, вам не хватает mapStateToProps, который фактически отображает состояние вашего приложения на реквизиты вашего StartPage компонента:

const mapStateToProps = (state) => {
    return {
        balance: state.BalanceReducer //now you can acccess the balance through this.props.balance
    }
}

export default connect(mapStateToProps)(StartPage);