reactjs - mapStateToProps 触发后组件未更新

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);

这是我的 reducer :

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 方法在分派(dispatch)操作后触发。我知道这是一个重复的问题，而且我的问题不太可能有所不同，但我就是找不到答案。如有任何帮助，我们将不胜感激。

编辑:为了进一步说明，这里是我的 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 的情况下调用你的 Action 创建者不会分派(dispatch) Action :

 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

您可能正在改变您的状态，请尝试使用以下方法:

reducer

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