At which point do I get data for my app using redux?

Question

I am fetching all event data in my app.js:

store.dispatch(
  eventsFetchData(
    "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/events"
  )
);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigation />
      </Provider>
    );
  }
}

However I need a drop down list on my first page, where users can select a category. I only need to show events for the chosen category.

Where would I fetch my categories to populate my select list? I can then do a fetch for only the events in that category.

Here is my select list using hardcoded data, which I would like to get from an api:

import React, { Component } from "react";
import { connect } from "react-redux";

import { View, Text, Image, StyleSheet } from "react-native";

import { setSelectedView } from "../actions/events";
import { navigate } from "../navigation/actions";
import Picker from "./common/Picker";

import * as theme from "../theme";

class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.onGroupChange = this.onGroupChange.bind(this);
        this.onYearChange = this.onYearChange.bind(this);
    }

    onYearChange(e) {
        if (e !== null) {
            this.props.dispatch(setSelectedView(e));
        }
    }

    onGroupChange(e) {
        this.props.navigation.navigate("Month");
    }

    render() {
        const studentYears = [
            {
                id: 0,
                label: "Year 1",
                value: 1,
                options: ["Firm 1", "Firm 2", "Firm 3"]
            },
            {
                id: 1,
                label: "Year 2",
                value: 2,
                options: ["Firm 2", "Firm 3", "Firm 4"]
            },
            {
                id: 2,
                label: "Year 3",
                value: 3,
                options: ["Firm 5", "Firm 6", "Firm 7"]
            }
        ];

        let selectedView = this.props.selectedView;

        return (
            <View style={styles.container}>
                <Image
                    source={require("../img/logoGreen.png")}
                    style={{ width: 300, height: 200 }}
                />

                <View style={{ backgroundColor: "white" }}>
                    <Picker
                        selectedValue={selectedView}
                        label="Year"
                        onChange={this.onYearChange}
                        options={studentYears}
                    />
                    {selectedView
                        ? <Picker
                              selectedValue="0"
                              label="Year group"
                              onChange={this.onGroupChange}
                              options={studentYears[selectedView].options}
                          />
                        : null}
                </View>
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        events: state.events,
        hasErrored: state.eventsHasErrored,
        isLoading: state.eventsIsLoading,
        selectedView: state.setSelectedView
    };
};


export default connect(mapStateToProps)(HomeScreen);

const styles = StyleSheet.create({
    container: {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#6da1a6",
        flex: 1
    },
    logo: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: "contain"
    }
});

So the order of state should be,

1. Homescreen loads categories from api and populates select list.
2. User chooses category. A further select list should appear where the user chooses the a subcategory.
3. Main event data is loaded,determined by chosen subcategory.
4. User is taken to main events screen/ calendar.

Answer 1

You should do the fetch of the data in the componentDidMount(){ ..here..} function in the Homescreen component. When you get the data you can:

-Either put it inside the Homescreen class state which means that you should do this.setState({...fetchedData})

Note that you have to handle empty data in the picker in the beginning since you will not have the data immediately.

-Or you can dispatch a redux function with the data you have fetched

this.props.dispatch(action(data))

in this case you need to add the redux state that contains the data to your Homescreen component with the mapStateToprops function, you will find the data in this.props.YOUR_MAPED_STATE when you get the data.