не могу загрузить данные json из действия в реакции-редукции

im пытается загрузить некоторые данные json в моем простом веб-приложении. Я собираюсь показать вам шаги. Первое мое действие:не могу загрузить данные json из действия в реакции-редукции

const jsonData = 
    [ 
    { 
     "id": "00260001010000000001", 
     "accountNumber": "0026.0001.01.0000000001", 
     "description": "My account #1", 
     "balance": 42.0, 
     "balanceAvailable": 42.0, 
     "currency": "EUR" 
    }, 
    { 
     "id": "00260001010000000002", 
     "accountNumber": "0026.0001.01.0000000002", 
     "description": "My account #2", 
     "balance": 43.0, 
     "balanceAvailable": 43.0, 
     "currency": "EUR" 
    } 
    ]; 

export function inAccountList(jsonData) { 
    return { 
    type: 'ACCOUNT_LIST', 
    payload: jsonData 
    }; 
}

Затем я создаю мой редуктор счет-лист-редуктор, как это:

import { Map } from 'immutable'; 

function mergeState(state, newState) { 
    return state.merge(newState); 
} 

    export default function (state = Map(), action) { 
     switch (action.type) { 
     case 'ACCOUNT_LIST': 
      return mergeState(state, action.payload); 
     default: 
      return state; 
     } 
    }

import { combineReducers } from 'redux-immutable'; 
import AccountListReducer from './account_list_reducer'; 

const rootReducer = combineReducers({ 
    accounts: AccountListReducer, 
}); 

export default rootReducer;

Затем я создаю мой accountListContainer, как это:

import { connect } from 'react-redux'; 
import AccountList from '../../components/AccountList'; 


function mapStateToProps(state) { 
    // FIXME account number and available balance mapping. 
    return { accounts: state.get('accounts').map(account => account.toJS()) }; 
} 

const AccountListContainer = connect(mapStateToProps)(AccountList); 

export default AccountListContainer;

и мой Acc ountList вид:

import React, { PropTypes } from 'react'; 
import { Table } from 'reactstrap'; 
import AccountEntry from '../AccountEntry'; 

const AccountList = ({ accounts }) => (
    <div className="account-list"> 
    <h4 className="table-header">Accounts</h4> 
    <Table hover> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Account Number</th> 
      <th>Description</th> 
      <th>Balance</th> 
      <th>Available Balance</th> 
      <th>Currency</th> 
     </tr> 
     </thead> 
     <tbody> 
     {accounts.map((account, i) => 
      <AccountEntry 
      key={account.id} idx={i + 1} 
      {...account} 
      /> 
    )} 
     </tbody> 
    </Table> 
    </div> 
); 


export default AccountList;

Но это не работает. он не отображает фиктивные данные, записанные в jsonData. Вы хоть понимаете, что происходит?

Большое спасибо

источник

2017-01-10 user7334203

Состояние вашего магазина не является объектом ImmutableJS, скорее ваши редукторы являются объектами ImmutableJS i nside it. Попробуйте state.accounts.toJS() в вашей функции mapStateToProps –

Спасибо за ваш быстрый ответ. Мистер Митчелл, но это не работает. он показывает мне ошибку, пойманную TypeError: Невозможно прочитать свойство «toJS» undefined – user7334203

Попробуйте вставить некоторые точки останова в mapStateToProps и посмотреть, что находится в вашем магазине. У вас должна быть пустая карта в состоянии inital, а затем какой-то объект Immutable после отправки ACCOUNT_LIST. Ошибка, которую вы получаете, предполагает, что state.accounts не существует, когда он вызывается –

Я думаю, что призыв к действию создателю inAccountList отсутствует

пройти создатель действия inAccountList в mapDispatchToProps
вызова действия в componentDidMount из AccountList компонента

источник

2017-01-10 17:15:07

не могу загрузить данные json из действия в реакции-редукции

ответ

Смежные вопросы