how to load json data in a redux-reducer or action

Question

I'm new to all this so please bear with me but here's the setup:

• List of 10 example exercises in my reducer
• a page where I'm mapping and displaying those 10 exercises
• So when a user creates a new exercise it displays in that page
• Have a big list of exercises in a json file that I want to also load into that page

Can't import that json file into display exercise page because all of the mapping is based on the mapStateToProps.

Doing an api call to the json data and saving it with the redux action is building up server cost and intial boot up time is slow.

I'm so confused on how to go by this?

Is there a way to load json file in my reducer to simply display them? Or load the data in my action to save them?

I have multiple actions and reducers so I need to make sure that i'm saving these data in the right part if that makes any sense.

the mapping

                    {exercise => {
                        return (
                            <>
                                <View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
                                    <Text>
                                        <Text style={styles.ExerciseInfo}>{exercise.sets}</Text>
                                        <Text style={styles.ExerciseInfoDetail}>sets</Text>
                                    </Text>

                                    <Text>
                                        <Text style={styles.ExerciseInfo}>{exercise.reps}</Text>
                                        <Text style={styles.ExerciseInfoDetail}>reps</Text>
                                    </Text>

                                </View>

                            </>
                        )
                    }}

this at the bottom of that page

const mapStateToProps = (state) => ({
    dataSource: filterExercises(state.exercise, { type: 'all' }),
    exerciseData: filterExercises(state.exercise, { type: 'from_custom_list' }),
});

const mapDispatchToProps = (dispatch) => ({
    load: (item) => dispatch(load(item)),
});

edit...in my exercises reducer....future reader this is left here so you can compare it to the updated version below

Would this be where i initialized my reducer?

const getAllExercises = (state) => state.allIds.map(id => state.byId[id]);

// filtered exercises. This is a selector, not a reducer. Will not modify state, just return what we want to see.
export const filterExercises = (state, filter = { type: 'all', list: [] }) => {
    const allExercises = getAllExercises(state);
    switch (filter.type) {
        case 'all': {
            return allExercises;
        }
        case 'tag': {
            return allExercises.filter(item => item.tags.includes(tag));
        }
        case 'from_custom_list': {
            // input list should be [id,id, ...]
            return (filter.list || []).map(id => ({ ...state.byId[id] }));
        }
        default:
            return allExercises;
    }
}

Edit 2 after the update of the answer below the exercises still didn't load but it also gave no error

// importing json file...import doesn't work but this did
const ExerciseDatabase = require('../../../assets/files/exercise.json');

const getAllExercises = (state) => state.allIds.map(id => state.byId[id]);

// this is json file being mapped
const combinedExercises = ExerciseDatabase.forEach((id, name) => { (id.toString(), name) });
    
// setting intial state to exercises in reducer and the json file
const initialState = {
    exercise: combinedExercises,
    filter: 'all'
}

}) => {

// the state being set to all of the exercises into the reducer and imported json files.
export const filterExercises = (state = initialState, filter = { type: 'all', list: [] }) => {
    const allExercises = getAllExercises(state);
    switch (filter.type) {
        case 'all': {
            return allExercises;
        }
        case 'tag': {
            return allExercises.filter(item => item.tags.includes(tag));
        }
        case 'from_custom_list': {
            // input list should be [id,id, ...]
            return (filter.list || []).map(id => ({ ...state.byId[id] }));
        }
        default:
            return allExercises;
    }
}

Answer 1

you can export your json in your json file like so:

export default exerciseJson = {};

then import it in your reducer:

import exerciseJson from 'path/to/jsonFile';

const allExercises = exerciseJson.filter() //whatever you need to do with the jso.

const initialState = {
    exercise: allExercises,
    filter: 'all'
}
export const filterExercises = (state = initialState, filter = { type: 'all', list: [] }) => {
    const allExercises = getAllExercises(state);
    switch (filter.type) {
        case 'all': {
            return allExercises;
        }
        case 'tag': {
            return allExercises.filter(item => item.tags.includes(tag));
        }
        case 'from_custom_list': {
            // input list should be [id,id, ...]
            return (filter.list || []).map(id => ({ ...state.byId[id] }));
        }
        default:
            return allExercises;
    }
}