2016-03-08 17 views
5

Ciao uso la mappa immutabile per stato e quando provo maspStateToProps ho questo errore.mapStateToProps deve restituire un oggetto. Invece ha ricevuto la mappa {}?

Violazione invariante non rilevata: mapStateToProps deve restituire un oggetto. Mappa invece ricevuta {}.

Ecco il mio codice:

Componente:

const mapStateToProps = (state) => { 
     return state 
    } 

    class LoanCalculator extends React.Component{ 

     componentWillMount(){ 
     this.dispatch(loadConstraints()); 
    } 

     render(){ 
     return (
      <div> 
      <h1> Loan Calculator </h1> 
      <SlidersBox {...this.props}/> 
     </div> 
     ) 
    } 
    } 

    LoanCalculator = connect(
     mapStateToProps 
    )(LoanCalculator) 

    export default LoanCalculator 

RIDUTTORE

import { Map } from 'immutable' 
    import {LOAD_CONSTRAINTS, SET_AMOUNT_VALUE, SET_TERM_VALUE} from "../actions/actions"; 

    const initialState = new Map(); 

    export default function calculator(state = initialState, action){ 
     switch (action.type){ 
     case LOAD_CONSTRAINTS: 
      return state.set("constraints", action.constraints) 
     case SET_AMOUNT_VALUE: 
      return state.set("selectedAmount", action.amount) 
     case SET_TERM_VALUE: 
     return state.set("selectedTerm", action.term) 
     default: 
      return state 
     } 
    } 
+1

tuo stato sembra essere una mappa da immutable.js, mentre mapStateToProps deve restituire un oggetto, come il vostro errore messaggio dice Prova a restituire un oggetto convertendo la mappa o estraendo i valori necessari in una struttura di oggetti. – Robin

+0

Perché non solo "return {state}'? – lux

risposta

11

Questo problema github si occupa di questo problema esatto: https://github.com/reactjs/react-redux/issues/60.

È possibile estrarre manualmente i valori desiderati dalla mappa nella funzione mapStateToProps:

const mapStateToProps = (state) => { 
    return { 
     constraints: state.get('constraints'), 
     selectedAmount: state.get('selectedAmount'), 
     selectedTerm: state.get('selectedTerm'), 
    }; 
} 
+0

grazie mille questo è quello che mi serve. – Grund

+0

Per inciso, questo ti costringe anche a tenere a mente esattamente quello che stai tramandando. Ad un certo punto, diventa evidente che è necessario dividere un componente in crescita. – sean

Problemi correlati