ActionCreator Dispatch nicht aufrüttelnde Komponente

Question

Ich habe ein einfaches Dropdown-Menü zum Auswählen einer Sprache, die an eine Karte angehängt ist, die eine Aktion onClick auslöst, die wiederum die Komponente mit der aktualisierten Sprache neu rendern sollte.

Die Aktion wird definitiv onClick ausgelöst und ich kann den Zustand "ändern" mit Redux Devtools sehen.

Die Containerkomponente wird jedoch nicht neu gerendert. Immer noch neu in Redux, also bin ich mir sicher, dass es etwas Dummes ist, das ich übersehe.

Container/Frage

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

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

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

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

Aktion/Sprache

import { LANGUAGE_SELECTED } from './actionsTypes'; 
 

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

Minderer/Sprache

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

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

rootreducer

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

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

 
export default rootReducer;

Answer 1

Ich glaube, Sie haben languageSelected sowohl in mapStateToProps und mapDispatchToProps .. es sieht aus wie Sie selectedLanguage vom Staat verwendet werden sollte, aber ich kann es nicht in Ihrem machen Code:

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