Что не так с React Native?

Question

[Сева]

Привет,

Заставили на новом проекте влезть в Реакт. Не особенно понимаю, почему не получается.

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 (экран)

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 (редьюсер)

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
  }
}

Кто может помочь? Утомился гуглить.

Answer 1

[elf2707]

Привет!
Покажи файл import configureStore from './configureStore'
Скорее всего проблема в том как создается store.
В mapStateToProps в state данные от разных редусеров и должно быть
что-то вроде:
{
accounts: state.accountsReducer.accounts
}

Самое простое можно вывести в консоль state и увидеть, что там и где лежит. По содержимому configureStore будет понятно.

Comments

[Сева]

import { createStore } from 'redux'
import rootReducer from './reducers'

export default function configureStore() {
  let store = createStore(rootReducer)
  return store
}

Тут подробнее (уже даже версия номер два), все равно никто не смог помочь - ошибка та же.

[elf2707]

Ответил на stackoverflow дублирую здесь, надеюсь поможет попробуй:

function mapStateToProps (state) {
  // Here you can use console.log to see the state
  // console.log(state);
  return {
    accounts: state.accounts.accounts
  }
}

Кстати вывод console.log можно смотреть в Xcode или в Android Studio logcat

[Сева]

[elf2707]

Это лог state?
Получается значит mapStateToProps должен выглядеть так:

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

Хотя я не пойму почему. Судя по коду со stackoverflow должно быть accounts.accounts

[Сева]

Вау, оно работает. Спасибо, мужик, посыпаю голову пеплом.

[elf2707]

Не за что, на здоровье)