React/Redux 不渲染 nextState

Question

研究这个问题的常见原因是改变状态而不返回状态的新对象，这导致 redux 无法识别更改。但是，这不是也从来不是问题，我很清楚这一点。我要返回一个新对象。在您可以在附加图像中看到的记录器中，它显示成功的 api 调用已解决并且 nextState 已更新但从未呈现。刷新页面的行为完全相同，即使我预计在初始登陆到根页面时可能需要这样做。

组件：

import pokemonReducer from '../../reducers/pokemon_reducer';
import PokemonIndexItem from './pokemon_index_item';
import {Route} from 'react-router-dom';
import PokemonDetailContainer from './pokemon_detail_container';


class PokemonIndex extends React.Component {
    
    componentDidMount() {
        this.props.requestAllPokemon();
    }

    render() {
        const pokemon = this.props.pokemon;
        
       

        return (
            <section className="pokedex">
                <Route path='/pokemon/:pokemonID' component={PokemonDetailContainer} />
                <ul>{pokemon && pokemon.map(poke => <li>{poke.name}{poke.id}</li>)}</ul>
            </section>
        );
    }
}

export default PokemonIndex;

和容器：

import {connect} from 'react-redux';
import { selectAllPokemon } from '../../reducers/selectors';
import PokemonIndex from './pokemon_index';
import { requestAllPokemon } from '../../actions/pokemon_actions';

const mapStateToProps = state => ({
    pokemon: selectAllPokemon(state)
});

const mapDispatchToProps = dispatch => ({
    requestAllPokemon: () => dispatch(requestAllPokemon())
});

export default connect(mapStateToProps, mapDispatchToProps)(PokemonIndex);

减速器：

import { RECEIVE_ALL_POKEMON, RECEIVE_SINGLE_POKEMON} from '../actions/pokemon_actions';



const pokemonReducer = (initialState = {}, action) => {
    Object.freeze(initialState);
    switch(action.type) {
        
        case RECEIVE_ALL_POKEMON:
            return Object.assign({}, initialState, action.pokemon);
        case RECEIVE_SINGLE_POKEMON:
            let poke = action.payload.pokemon
            return Object.assign({}, initialState, {[poke.id]: poke})
        default: 
            return initialState;
    }
};

export default pokemonReducer;

二级减速器：

import { combineReducers } from 'redux';
import pokemonReducer from './pokemon_reducer'


const entitiesReducer = combineReducers({
    pokemon: pokemonReducer,
});

export default entitiesReducer;

rootreducer:

import {combineReducers} from 'redux';
import entitiesReducer from './entities_reducer';

const rootReducer = combineReducers({
    entities: entitiesReducer
});

export default rootReducer;

此处要求的是在 reducers 文件夹中定义的选择器

export const selectAllPokemon = (state) => {
    Object.values(state.entities.pokemon);
};

export const selectSinglePokemon = (state) => {
    Object.values(state.entities.pokemon)
};

这是创建的操作：


export const RECEIVE_ALL_POKEMON = "RECEIVE_ALL_POKEMON";
export const RECEIVE_SINGLE_POKEMON = "RECEIVE_SINGLE_POKEMON";
import * as APIUtil from '../util/api_util';

export const receiveAllPokemon = (pokemon) => (
    {
        type: RECEIVE_ALL_POKEMON,
        pokemon
    }
);

export const requestAllPokemon = () => (dispatch) => {
    APIUtil.fetchAllPokemon()
        .then(
            pokemon => 
            { dispatch(receiveAllPokemon(pokemon));}
        );
        
};

export const receiveSinglePokemon = data => (
    {
        type: RECEIVE_SINGLE_POKEMON,
        data
    }
);

export const requestSinglePokemon = id => (dispatch) => {
    APIUtil.fetchSinglePokemon(id)
        .then(pokemon => {dispatch(receiveSinglePokemon(pokemon));
        return pokemon;});
};

nextstate showing in console

Answer 1

正如您在问题中所述，您的 redux 状态已正确设置，但您的新状态从未被渲染，我认为这与您的选择器有关。在我看来，您忘记了 return 您的计算状态。

export const selectAllPokemon = (state) => {
    Object.values(state.entities.pokemon);
};
// will return undefined

对于return你的状态，你有两个选择：

显式 return

 export const selectAllPokemon = (state) => {
   return Object.values(state.entities.pokemon);
};

隐式return

 export const selectAllPokemon = (state) => (
   Object.values(state.entities.pokemon);
 );

我参考这个 article or look at the examples I created in playground 是为了更好地理解箭头函数中的隐式和显式 return。

React/Redux 不渲染 nextState

React/Redux not rendering nextState

javascript

rendering

reactjs

redux

react-redux