Question

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

我的商店应该保存一个会话对象数组，我想在一个简单的FlatList中显示这些对象，以便在创建自定义FlatList之前了解这些概念。我展示了一个我想要使用State的示例，但是我无法使其与Redux一起使用。

我的{this.props.sessions}不显示任何内容，我希望它显示“会话”的名称，就像“状态”按钮一样。

我尝试了许多不同的配置，包括浏览this.props。*，试图找到一些可以输出信息的东西。

我什至试图在Redux中仅使用一个简单的“ 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()}
            />

我想在Flatux的redux存储中显示会话列表，并且我希望“添加”按钮在点击时创建更多会话。

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

编辑：这是我使用提供程序的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

您需要附加提供程序，以使Redux存储可用于所连接的组件。您可以在这里找到正确的说明：https://react-redux.js.org/api/provider。如果您还有其他问题，请告诉我。

编辑：

您的提供者已正确连接。

我相信我找到了您的问题。由redux管理的应用程序状态是由reducer返回的状态。因此，如果您想从州获得SessionList，则应使用

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

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

1 个答案: