javascript - 为什么我不能在 React-Native Redux 中从我的 mapStateToProps 访问我的 this.state.props session 数组？

Question

我正在尝试存储一组 Session 对象。每个 Session 都有一个 Hand 对象数组。我正在尝试建立一个 Redux 商店，但由于某种原因我无法使用 mapStateToProps 访问我的商店。 this.props.* 中的所有选项都与我的 redux 存储无关。

我的商店应该包含一组 session 对象，我想在一个简单的 FlatList 中显示这些对象，以便在创建自定义 FlatList 之前了解概念。我展示了一个示例，说明了我想要使用 State 的确切内容，但我无法让它与 Redux 一起使用。

我的 {this.props.sessions} 没有显示任何内容，我希望它显示 session 的名称，就像状态按钮一样。

我尝试了很多不同的配置，包括翻阅 this.props.* 试图找到输出信息的东西。

我什至尝试在 Redux 中使用一个简单的“Count”变量，看看我是否可以让它工作，但也没有用。

这里有潜在的问题吗？

我的应用程序运行正常，但是当我按下“使用 redux 添加新 session ”按钮时，它什么也没做。

//*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 中显示我的 redux 存储中的 session 列表，并且我希望“添加”按钮在我点击它时创建更多 session 。

(基本上重新创建 this.State 已经在做的事情，但是使用 redux)。

编辑:这是我的 App.js 文件，我在其中使用了 Provider。这是使用提供者的不正确方式吗？

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

您需要附加 Provider 以使 redux store 可用于您连接的组件。您可以在此处找到正确的说明:https://react-redux.js.org/api/provider .如果您还有其他问题，请告诉我。

编辑:

您的提供商已正确连接。

我相信我发现了你的问题。由 redux 管理的应用程序状态是 reducer 返回的状态。所以，如果你想从状态中获取SessionList，你应该使用

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