Javascript 如何在redux reducer或action中加载json数据

我对这一切都不熟悉，所以请容忍我，但以下是设置：

• 我的减速机中的10个示例练习列表
• 我正在绘制和显示这10个练习的页面
• 因此，当用户创建新练习时，它会显示在该页面中
• 在一个json文件中有一个很大的练习列表，我也想将它加载到该页面中

无法将该json文件导入显示练习页面，因为所有映射都基于

MapStateTrops

对json数据执行api调用并使用redux操作保存它会增加服务器成本，并且初始启动时间很慢

我真不知道该怎么办

有没有办法在我的

reducer

中加载

json

文件来简单地显示它们？ 或者在我的

操作中加载数据以保存它们

我有多个
操作
和
减缩器
，因此我需要确保将这些数据保存在正确的部分（如果有意义的话）

映射

                    {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>

                            </>
                        )
                    }}

编辑…在我的练习减速机中……未来的读者这是留在这里的，因此您可以将其与下面的更新版本进行比较

这就是我初始化减速器的地方吗

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;
    }
}

编辑2
更新下面的答案后，练习仍然没有加载，但也没有出现错误

// 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;
    }
}

您可以在json文件中导出json，如下所示：

export default exerciseJson = {};

然后将其导入减速器：

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;
    }
}

对于每个reducer，都应该有一个初始状态，您只需将json加载到该初始状态。这会出现在我的exercie reducer页面的
getAllExercises
中吗？我对上面的问题进行了编辑，以显示代码抱歉，我只是有点困惑如何将
allExercises
分配到
状态。因为现在这就是
allExercises
分配给的：
const getAllExercises=（state）=>state.allIds.map（id=>state.byId[id]）它链接到我手动输入的练习（我仍然需要它们，因为其他东西都链接到它们。您希望您的状态如何？类似这样？{exercisearray:[exercisearray]，filter:'all'}？是的。因此我会执行
const exerciseDatabase=require（json文件的路径）
我将有一个不同的
const
来映射它们，然后我将执行
constallexercises={{exercisearray:[exercisearray]，过滤器：'all'}
？json文件是否需要导出为一个或一个正常的
json
文件是否可以工作？更新了答案。如果您只访问存储中的变量
exercise
，而不调用任何操作，会发生什么情况？
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;
    }
}