Question

我正在学习如何从头开始实现redux，并且遇到了组件重新渲染的问题。我在StackOverflow 上对此问题的搜索已经产生了成千上万的结果，该问题的答案始终是“您改变了状态”。我已经阅读了connect文档，看过一群有类似问题的人，但是我根本看不出这里的状态突变可能是什么问题，因此我将尝试与我一起询问简单的例子。

这是我的容器组件：

import React, { Component } from 'react'; import { connect } from 'react-redux'; import { addPokemon } from '../../../redux/actions'; import ReduxTester from '../../components/redux_tester/redux_tester'; export class ReduxTesting extends Component { constructor(props) { super(props); } addPokemon(name, pokeType) { addPokemon(name, pokeType); } render() { return ( <div> <ReduxTester pokemon={this.props.pokemon} addPokemon={this.addPokemon} /> </div> ); } } const MapStateToProps = function(state) { return { pokemon: state.pokemon, }; }; export default connect(MapStateToProps)(ReduxTesting);

这是我的减速器：

const defaultState = { pokemon: {}, }; export default function pokemonReducer(state = defaultState, action) { const newState = Object.assign({}, state); switch (action.type) { case 'ADD_POKEMON': newState.pokemon[action.name] = action.pokeType; break; default: break; } return newState; }

我的具体问题是ReactTesting的componentWillReceiveProps方法没有触发，因此该组件没有被更新和重新呈现。请注意，在分派动作之后，会触发mapStateToProps方法。我知道这是一个重复性的问题，我的问题不太可能有所不同，但我找不到答案。感谢您的协助。

编辑：为进一步说明，这是我的actions.js，我直接在其中导入了调度功能：

import { dispatch } from './store'; // Returns an action that fits into the reducer export function addPokemon(name, pokeType) { dispatch({ type: 'ADD_POKEMON', name, pokeType, }); }

编辑2 ：我发现了一些其他信息，但我不理解。似乎在MapStateToProps中，当我将整个Redux状态分配给一个prop时触发了重新渲染，但是当我仅将Redux状态的一部分分配给prop时却没有触发。

这会触发重新渲染：

const MapStateToProps = function(state) { return { pokemon: state, }; };

这不是：

const MapStateToProps = function(state) { return { pokemon: state.pokemon, }; };

但是，我已经确认我的redux存储确实具有pokemon属性，并且该状态是在该状态下进行的。有见识吗？

Answer 1

不通过redux调用动作创建者将不会分派动作：

 export class ReduxTesting extends Component {
     constructor(props) {
         super(props);
     }


     addPokemon(name, pokeType) {
         this.props.addPokemon(name, pokeType);
     }

    .
    .
    .


    function mapDispatchToProps(dispatch) {
        return({
            addPokemon: (name, pokeType) => {dispatch(addPokemon(name, pokeType))}
            })
        }

 export default connect(MapStateToProps, mapDispatchToProps)(ReduxTesting);

编辑2

您可能正在改变自己的状态，请尝试以下操作：

减速器

switch (action.type) {
    case 'ADD_POKEMON':
      return {
        ...state,
        pokemon[action.name]: action.pokeType;
      };

MapStateToProps触发后组件未更新

1 个答案: