Вызов редукционного действия не достигает редуктора - PullRequest
Новая
       28

Вызов редукционного действия не достигает редуктора

0 голосов
/ 25 июня 2018

При вызове действия из компонента, похоже, не обновляется редуктор.

Я полагаю, что правильно инициализировал все хранилище, однако оно не достигает блока внутри действия setCurrencyType() (журнал!!!! setCurrencyType) не регистрируется.Кажется, лог !inside, поэтому я знаю, что действие вызывается правильно, кто-нибудь может помочь?

CoinReducer.js 

export function coinReducer(state = initialState, action) {
    console.log('??? inside reducer')
    switch(action.type) {
        case CHANGE_CURRENCY_TYPE: {
            console.log('!!! reducer', action)
            return {
                ...state,
                currencyType: action.currency
            }
        }
        case CHANGE_NUMBER_COINS: {
            return {
                ...state,
                numberOfCoins: action.numberOfCoins
            }
        }
        default:
            return state

    }
}

Домой.js 

export class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            refreshing: false,
            loading: false,
            numberOfCoins: props.numberOfCoins,
            currencyType: props.currencyType
        };

        this._renderRow = this._renderRow.bind(this);
        this._getCoinData = this._getCoinData.bind(this);
        this._onRefresh = this._onRefresh.bind(this);
    }

    componentDidMount() {
        this._getCoinData();
    }

    async _getCoinData() {
        this.setState({loading: true});
        const result = await getCryptocurrencyData();

        this.setState({
            loading: false,
            refreshing: false,
            data: result,
        });
    }

    _renderRow(data) {
        const currencyTypeJson = getCurrencyTypeJson(data.item);

        return (
            <CoinCell
                name={data.item.name}
                price={currencyTypeJson}
                percentChange={data.item.percent_change_24h}
                symbol={data.item.symbol}>
            </CoinCell>)
    }

    _renderHeader() {
        return (
            <Header
                refresh={this._onRefresh}/>
        )
    }

    async _onRefresh() {
        this.setState({refreshing: true});
        await this._getCoinData();
        await setCurrencyType('!!usdusd')

    }

    _renderSeparator() {
        return (
            <View
                style={{
                    height: 1,
                    width: "100%",
                    backgroundColor: "#CED0CE",
                }}
            />
        );
    };

    render() {
        return (
                <FlatList
                    data={this.state.data}
                    onRefresh={this._onRefresh}
                    refreshing={this.state.refreshing}
                    extraData={this.state}
                    renderItem={this._renderRow}
                    ListHeaderComponent={this._renderHeader()}
                    ItemSeparatorComponent={this._renderSeparator}
                    keyExtractor={item => item.id}
                />
        );
    }
}

function mapStateToProps(state) {
    return {
        currencyType: state.coinReducer.currencyType,
        numberOfCoins: state.coinReducer.numberOfCoins
    };
}

function mapDispatchToProps(dispatch) {
    return {
        setCurrencyType: () => {
            dispatch(setCurrencyType());
        },
        setNumberOfCoins: () => {
            dispatch(setNumberOfCoins());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

DataActions 

export function setCurrencyType(currency) {
    console.log('!inside', currency)
    return async (dispatch) => {
        console.log('!!!! setCurrencyType', currency)
        return dispatch({type: CHANGE_CURRENCY_TYPE, currency});  
    }
}

export function setNumberOfCoins(number) {
    return async (dispatch) => {
        dispatch({type: CHANGE_NUMBER_COINS, numberOfCoins: number});
    }
}

GlobalStore 

let store = null;

export function getStore() {
    console.log('!getStore')
    if (!store) {
        store = createStore(rootReducer, applyMiddleware(thunk));
    } 
    return store;
}

1 Ответ

0 голосов
/ 25 июня 2018

Это потому, что вы используете оригинальную версию setCurrencyType(), а не "привязанную к dispatch версию, которую вы получаете в качестве реквизита: 

    await setCurrencyType('!!usdusd')

Следовательно, фактически ничего не отправляетсяи ваш редуктор не будет работать вообще.

Измените его на: 

    await this.props.setCurrencyType('!!usdusd')
...