Почему я не могу получить доступ к массиву сеансов this.state.props из своего mapStateToProps в React-Native Redux?

Question

Я пытаюсь сохранить массив объектов Session.Каждая сессия имеет массив объектов Hand.Я пытаюсь настроить магазин Redux, но по какой-то причине я не могу получить доступ к своему магазину с помощью mapStateToProps.Ни один из параметров в этом .props. * Не имеет никакого отношения к моему магазину редуксов.

Предполагается, что в моем хранилище содержится массив сессионных объектов, и я хочу отобразить эти объекты в простом FlatList, чтобы разобраться в концепциях перед тем, как создавать собственный FlatList.Я показываю пример того, что я хочу, используя State, но я не могу заставить его работать с Redux.

Мой {this.props.sessions} ничего не отображает, и я хочу, чтобы он отображал имя сеанса так же, как кнопка состояния.

Я перепробовал множество разных конфигураций, включая перелистывание this.props. * Пытался найти что-то для вывода информации.

Я даже пытался просто использовать простую переменную "Count" с Redux, чтобы посмотреть, смогу ли я заставить это работать, и это тоже не сработало.

Есть ли основная проблема здесь?

Мое приложение работает нормально, но кнопка «добавить новый сеанс с избыточностью» просто ничего не делает, когда я нажимаю его.

//*HOME.JS
import React from 'react';
import { StyleSheet, View, Text, Button, FlatList} from 'react-native';
import { connect } from 'react-redux';
import { SessionObject } from './Session';

var session = new SessionObject("Session", []);
class Home extends React.Component {
  state = {
    SessionList : [],
    SessionCount : 1
  }
  render() {
    const { navigate } = this.props.navigation;   
      return (
        <View style={styles.container}>
          <View style={styles.container}>
            <Text>Home Screen!! :)</Text>
          </View>
          <View style={styles.style_flex3}>
          <Button title="Add new Session with State" onPress={() => this.addItem() } />
          <FlatList
            data={this.state.SessionList}
            renderItem={({item}) => this.SessionComponent(item)}
            keyExtractor={(item, index) => index.toString()}
            />
            <Text>{this.props.sessions}</Text>
            <Text>{this.props.Count}</Text>
            <Button title="Add new Session with Redux!" onPress={() => this.addNewSession() } />
            <FlatList
            data={this.props.sessions}
            renderItem={({item}) => this.SessionComponent(item)}
            keyExtractor={(item, index) => index.toString()}
            />
          </View>
        </View>
      );
    }
    addItem = () => { //USING STATE
      this.setState((state, props) => ({
        SessionList : [...state.SessionList, new SessionObject(state.SessionCount)],
        SessionCount : state.SessionCount + 1,
      }));
    };
    addNewSession = () => { //USING REDUX
      var newSession = new SessionObject("new-Session", []);
      this.props.addSession(newSession);
    };
}
const mapStateToProps = (state) => {
  return {
    sessions: state.reducer
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      addSession: (newSession) => {
        dispatch({
          type: "ADD_SESSION",
          payload: newSession
        });
      }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

//*STORE.JS
import React from 'react';
import { createStore } from 'redux';
import { SessionObject } from './screens/Session';

//var newSession1 = new SessionObject("Default", []);

const initialState = {
     currentSession: undefined,
     SessionList: [],
    //Count: 0,
}

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_SESSION":
            state = {
                ...state,
                currentSession: action.payload,
                SessionList: [...state.SessionList, action.payload]
            };
            ...
    }
    return state;
};

const store = createStore(reducer);

export default store;

//THIS IS WHERE I WANT 
TO ACCESS THIS.PROPS.SESSIONS
            <Text>{this.props.sessions}</Text>
            <Text>{this.props.Count}</Text>
            <Button title="Add new Session with Redux!" onPress={() => 
               this.addNewSession() } />
            <FlatList
            data={this.props.sessions}
            renderItem={({item}) => this.SessionComponent(item)}
            keyExtractor={(item, index) => index.toString()}
            />

Я хочу отобразить список сессий в моем хранилище примитивов в Flatlist, и я хочу, чтобы кнопка «Добавить» создавала больше сессий, когда я касался его.

(в основном воссоздайте то, что this.State уже делает, но с избыточным).

EDIT: это мой файл App.js, где я использую провайдера.Это неправильный способ использования провайдера?

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { Provider } from 'react-redux';
import store from './store';
import Home from './screens/Home';
import Session from './screens/Session';
import Hand from './screens/Hand';

export default class App extends React.Component {
  render() {
      return (
        <Provider store={store}>
          <AppContainer />
        </Provider>
      );
    }
}
//creating the stack navigation variable
const AppStackNavigator = createStackNavigator({
  Home: Home,
  Session: Session,
  Hand: Hand,
})

//Contains the app navigation variable,
//using a navigator variable
const AppContainer = createAppContainer(AppStackNavigator);

Answer 1

Вам необходимо подключить провайдера, чтобы сделать доступным хранилище для подключенных компонентов. Вы можете найти соответствующие инструкции здесь: https://react -redux.js.org / api / provider . Дайте мне знать, если у вас есть дополнительные вопросы.

EDIT:

Ваш поставщик услуг правильно подключен.

Кажется, я нашел твою проблему. Состояние вашего приложения, управляемое при помощи редукса, - это состояние, возвращаемое редуктором. Итак, если вы хотите получить SessionList из состояния, вы должны использовать

const mapStateToProps = (state) => {
  return {
    sessions: state.SessionList
  };
};