Question

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

这个动作肯定会触发onClick，我可以看到状态＆＃34;更改＆＃34;使用redux devtools。

但是，容器组件没有重新渲染。对Redux来说仍然是新手，所以我确定它是一种我可以忽视的傻事。

容器/问题

＆＃13;

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

＆＃13;

动作/语言

＆＃13;

import { LANGUAGE_SELECTED } from './actionsTypes';

export function languageSelected(language){
	return {
		type: LANGUAGE_SELECTED,
		payload: language
	}
}

＆＃13;

减速器/语言

＆＃13;

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

＆＃13;

rootreducer

＆＃13;

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;

＆＃13;

Answer 1

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

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

ActionCreator Dispatch not Rerendering组件

1 个答案: