Question

从组件调用动作时，似乎没有更新化简器。

我相信我已经正确初始化了所有存储，但是未到达操作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

    }
}

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

Answer 1

这是因为您使用的是原始版本的 $1$ ，而不是作为道具获得的“绑定到setCurrencyType()版本：

dispatch

因此，实际上没有任何调度，并且减速器根本不会运行。

更改为：

    await setCurrencyType('!!usdusd')

调用redux动作未到达reducer

1 个答案: