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

Question

我是这一切的新手，所以请耐心等待，但设置如下：

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

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

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

我很困惑该怎么办？

有没有一种方法可以在我的reducer中加载json文件来简单地显示它们？或者在我的action中加载数据以保存它们？

我有多个actions和reducers，所以如果有意义的话，我需要确保我将这些数据保存在正确的部分。

映射

{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 mapStateToProps = (state) => ({
dataSource: filterExercises(state.exercise, { type: 'all' }),
exerciseData: filterExercises(state.exercise, { type: 'from_custom_list' }),
});
const mapDispatchToProps = (dispatch) => ({
load: (item) => dispatch(load(item)),
});

编辑。。。在我的运动减速器里未来的读者，这是留在这里，所以你可以将其与下面的更新版本进行比较

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

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

Answer 1

您可以在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;
}
}