React/Redux not rendering 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;});
};

下一个状态显示在控制台中

Answer 1

正如您在问题中所说，您的redux状态得到了正确设置，但您的新状态从未被呈现，我认为这与您的选择器有关。在我看来，你忘记返回你的计算状态了。

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

对于返回您的状态，您有两种选择：

显式返回

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

隐式返回

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

我参考了这篇文章或查看了我在操场上创建的示例，以更好地理解箭头函数中的隐式和显式返回。