What's wrong with React Native?

Question

React Native

Hi,
We forced to get into React on a new project. I don't really understand why it doesn't work.
app.js

import React from 'react';
import { connect } from 'react-redux';
import { addAccount } from './actions';
import { Provider } from 'react-redux'
import configureStore from './configureStore'
import { StackNavigator } from 'react-navigation';
import Welcome from "./screens/welcome";
import Accounts from "./screens/accounts";
import AddAccount from "./screens/addAccount";

const App = StackNavigator({
  Welcome: {
    screen: Welcome,
  },
  Accounts: {
    screen: Accounts,
  },
  AddAccount: {
    screen: AddAccount,
  }
});

const store = configureStore();

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <App/>
      </Provider>
    )
  }
}

export default Root;

Accounts.js (screen)

import React from 'react';
import { StyleSheet, Text, View, button } from 'react-native';
import { ListItem } from 'react-native-elements';
import { StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import { getAccounts } from '../reducers';

export class Accounts extends React.Component {
  static navigationOptions = {
    title: 'Accounts',
  }
  constructor(props) {
    super(props);
  }
  render() {
    state = {}
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        {
          this.props.accounts.map((l, i) => (
            <ListItem
              key={i}
              title={l.title}
              subtitle={l.hash}
            />
          ))
        }
        <ListItem
          title="New Account"
          rightIcon={{ name: 'add' }}
          button onPress={ () => navigate('AddAccount') }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

function mapStateToProps (state) {
  return {
    accounts: state.accounts
  }
}

export default connect(   // вот тут нифига не мапится, в Props нет объекта из редьюсера
  mapStateToProps,
)(Accounts)

Accounts.js (reducer)

const DEFAULT_STATE = {
  accounts: [
    {
      title: "Bitcoin Slash Fund",
      hash: "0x83247jfy344fgg",
    },
    {
      title: "Etherium Safekeeping Account",
      hash: "0x83247jfy344fgg",
    },
  ],
}

export default (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    case 'ADD': 
      return { 
        accounts: [...state.accounts, action.account],
      }
    default: 
      return state
  }
}

Who can help? Tired of googling.

Answer 1

Hey!
Show the file import configureStore from './configureStore'
Most likely the problem is how the store is created.
In mapStateToProps , the state contains data from different reducers and should be
something like:
{
accounts: state.accountsReducer.accounts
}
The simplest thing you can do is display the state in the console and see what is there and where. The contents of configureStore will be clear.