Вопрос по reactjs, redux, react-redux, immutable.js – mapStateToProps должен возвращать объект. Вместо этого получил карту {}?

8

Здравствуйте, я использую карту Immuteble для состояния, и когда я пытаюсь maspStateToProps, у меня появляется эта ошибка.

Неизвестное инвариантное нарушение:mapStateToProps должен вернуть объект. Вместо этого получил карту {}.

Вот мой код:

Составная часть:

    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

РЕДУКТОР

    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
      }
    }
Ваше состояние выглядит как карта из immutable.js, в то время как mapStateToProps должен возвращать объект, как говорится в вашем сообщении об ошибке. Попробуйте вернуть объект, либо конвертировав карту, либо выделив нужные значения в структуру объекта. Robin
Почему не простоreturn {state}? lux

Ваш Ответ

1   ответ
15

Эта проблема GitHub охватывает именно эту проблему:https://github.com/reactjs/react-redux/issues/60.

Вы можете вручную извлечь нужные значения из вашей карты в вашей функции mapStateToProps:

const mapStateToProps = (state) => {
  return {
       constraints: state.get('constraints'),
       selectedAmount: state.get('selectedAmount'),
       selectedTerm: state.get('selectedTerm'),
  };
}
Кроме того, это также заставляет вас помнить, что именно вы передаете. В какой-то момент становится очевидно, что вам нужно разделить растущий компонент. Sean Lindo
Большое спасибо, это то, что мне нужно. Grund

Похожие вопросы