Question

我有一段代码，我想用它来调用api，但是在显示加载屏幕之前。出于某些原因，在我的代码中，我似乎无法通过REQUEST_GAMES操作来击中我的组合gameReducer。我已经包含了下面的所有代码。是什么原因导致减速器没有拾取动作类型？我不确定我做错了什么。我没有正确连接到我的组件吗？ redux记录器显示正在调用操作。

AddGame.js（component）

    import React, { Component } from 'react';
    import { connect } from 'react-redux';

    import * as actions from '../actions';
    import { getIsFetching, getVisibleGames } from '../reducers'

    class AddGame extends Component{
        constructor(props){
            super(props);
            this.state = {term: ''}
            this.onInputChange = this.onInputChange.bind(this)
            this.onFormSubmit = this.onFormSubmit.bind(this)
        }

        onInputChange(event){
            this.setState({term:event.target.value})
        }
        onFormSubmit(event){
            const { requestGames, fetchGames } = this.props;

            event.preventDefault();
            // we need to go fetch weather data
            requestGames();
            fetchGames(this.state.term);
            this.setState({term:'' })
        }
        renderContent(){
            const { isFetching , games} = this.props

            if (isFetching && !games.length){
                return <p>Loading</p>
            } else if (games){
                return <div>{games.map(this.getGame)}</div>
            }

        }
        styleCSS = {
            padding:'20px'
        };

        getGame(data){
            return(
                <div>
                <pre key={data.id}>{data.name}</pre>
                <img src ={data.cover.url} alt = "" />
                </div>
            )
        }

        render(){
            return(
                <div style={this.styleCSS}>
                    <form onSubmit={this.onFormSubmit}>
                        <input
                        value={this.state.term}
                        onChange={this.onInputChange}/>
                        <button type="submit">
                            Search
                        </button>
                        {this.renderContent()}
                    </form>
                </div>
            );
        }
    }

    const mapStateToProps = (state) => {
        return {
            isFetching :getIsFetching(state),
            games:getVisibleGames(state),
        }
    }

    export default connect(mapStateToProps,actions)(AddGame);

index.js（reducer）

        import { combineReducers } from 'redux';
        import authReducers from './authReducer';
        import { reducer as formReducer } from 'redux-form';
        import gameReducer, * as fromGames from './gameReducer';

        const allReducers= combineReducers({
            auth: authReducers,
            form: formReducer,
            game: gameReducer
        });

        export default allReducers;

        export const getIsFetching = (state) => fromGames.getIsFetching(state.game);
        export const getVisibleGames = (state)=> fromGames.getGames(state.game)

gameReducer.js

    import { REQUEST_GAME, FETCH_GAME } from '../actions/types';
    import { combineReducers } from 'redux';

    const gameReducer = () => {
        const games = (state=[], action) => {
            console.log(action);
            switch(action.type){
            case FETCH_GAME:
                return action.payload || false;
            default:
                return state;
            }
        };

        const isFetching = (state = false, action) => {
            switch (action.type) {
            case REQUEST_GAME:
                return true;
            case FETCH_GAME:
                return false;
            default:
                return state;
            }
        };

        return combineReducers({
            games,
            isFetching
        });
    };

    export default gameReducer;

    export const getIsFetching = state =>  state.isFetching
    ;
    export const getGames = state => state.games;

actions.js

    import axios from 'axios';
    import { FETCH_USER, REGISTER_USER, FETCH_GAME, REQUEST_GAME } from './types';

    export const fetchUser = ()=> async dispatch=>{
            const res = await axios.get('/api/current_user');
            dispatch({type:FETCH_USER, payload:res.data});
            console.log('fetchuser:',res.data)
        };



    export const fetchGames = (search)=> async dispatch=>{
        const proxy = 'https://still-eyrie-36200.herokuapp.com/'
        const res = await axios.get(`${proxy}https://api-2445582011268.apicast.io/games/?search=${search}&fields=name,category,genres,game_modes,cover,first_release_date,summary`,{
            headers: {
                'user-key':'18430b84d6bfaab720b08eeda8f2810d',
                'Accept':'application/json',
                'Content-Type':'application/json',
            }
        })
        dispatch({type:FETCH_GAME, payload:res.data});
        console.log('gamedata:',res.data)
    };

    export const requestGames = () =>({
        type: REQUEST_GAME
    })

Answer 1

name操作可能由reducer处理。在requestGame（）之后，立即调用fetchGames（）。 fetchGames（）将状态更改为false。这两个动作都发生在同一个功能块中。因此，prop更改不可能导致组件重新渲染。

动作未达到React redux中的Reducer

1 个答案: