ActionCreator Dispatch 不重新渲染组件

Question

我有一个用于选择语言的简单下拉菜单，附加到一张卡片上，该卡片会触发languageSelected() onClick 操作，该操作应该反过来用更新的语言重新渲染组件。

该动作肯定会触发 onClick，我可以使用 redux devtools 看到状态“更改”。

但是，容器组件不会重新渲染。对 Redux 来说还是新手，所以我确信我忽略了一些愚蠢的事情。

容器/问题

import React, { Component } from 'react';
import { languageSelected } from '../../actions/language';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { LANGUAGE_ENGLISH } from '../../actions/actionsTypes';
import { LANGUAGE_SPANISH } from '../../actions/actionsTypes';
import { LANGUAGE_CHINESE } from '../../actions/actionsTypes';
import '../../styles/Main.css';


class Question extends Component {
	render() {
		const {question, language, languageSelected} = this.props;
		let selectedQuestion = language;
		switch (selectedQuestion) {
			case LANGUAGE_SPANISH:
				selectedQuestion = question.q_spanish;
				break;
			case LANGUAGE_CHINESE:
				selectedQuestion = question.q_chinese;
				break;
			default:
				selectedQuestion = question.q_english;
				break;
		}
		return (
			<div className="container-fluid">
				<div className="card">
					<div className="card-header">
						<h3 className="pull-left">{question.category}</h3>
						<div className="dropdown">
							<button
								className="btn language-btn dropdown-toggle pull-right"
								type="button"
								data-toggle="dropdown"
								aria-haspopup="true"
								aria-expanded="false">
								Language
							</button>
							<div className="dropdown-menu language-drop-down"
								 aria-labelledby="dropdownMenubutton">
								<button className="dropdown-item white-link"
										type="button"
										onClick={() => languageSelected(LANGUAGE_ENGLISH)}>
									English
								</button>
								<button className="dropdown-item white-link"
										type="button"
										onClick={() => languageSelected(LANGUAGE_SPANISH)}>
									Spanish
								</button>
								<button className="dropdown-item white-link"
										type="button"
										onClick={() => languageSelected(LANGUAGE_CHINESE)}>
									Chinese
								</button>
							</div>
						</div>
					</div>
					<div className="card-body">
						<h4>{selectedQuestion}</h4>
					</div>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		question: state.question.selectedQuestion,
		language: state.language,
		languageSelected: state.language.languageSelected
	};
}

function mapDispatchToProps(dispatch) {
	return bindActionCreators({languageSelected}, dispatch)
}

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

动作/语言

import { LANGUAGE_SELECTED } from './actionsTypes';

export function languageSelected(language){
	return {
		type: LANGUAGE_SELECTED,
		payload: language
	}
}

reducer/语言

import { LANGUAGE_SELECTED } from '../actions/actionsTypes';
import { LANGUAGE_ENGLISH } from '../actions/actionsTypes';
const initialState = {
	selectedLanguage: LANGUAGE_ENGLISH,
};

export default function(state = initialState, action) {
	switch(action.type) {
		case LANGUAGE_SELECTED:
			return {...state, selectedLanguage: action.payload};
		default:
			return state;
	}
}

rootreducer

import { combineReducers } from 'redux';
import questions from './questions';
import question from './question';
import language from './language';

const rootReducer = combineReducers({
	question,
	questions,
	language
});

export default rootReducer;

Answer 1

我认为您在 mapStateToProps 和 mapDispatchToProps 中都有 languageSelected.. 看起来您应该使用该州的 selectedLanguage，但我在您的渲染代码中找不到它：

function mapStateToProps(state) {
    return {
        question: state.question.selectedQuestion,
        language: state.language,
        // change from `languageSelected`
        selectedLanguage: state.language.selectedLanguage
    };
}