Question

我想知道如何管理reducer之间的依赖关系。

假设您发动了一些动作，并且有两个减速器“正在”侦听此动作，但您希望其中一个减速器在另一个动作之前运行。

实施例：你有减少成分和减少膳食（膳食由成分组成）。每个reducer从服务器获取获取的数据，从中生成cast对象并将其保存在商店中（例如，成分reducer使Ingredient对象变为aray并将其作为新状态返回）。每种成分都有一个独特的ID。 Meal of在构造函数中获取listingredients id（它包含的成分），然后从商店中获取相关的成分对象并将它们添加为Meal的属性。为了提高效率，您可以从服务器（一个GET请求）一起获取所有数据（成分和膳食）。当您触发FETCH_ALL_DATA_FROM_SERVER（将获取的数据作为有效负载）时 - 您希望成分和减少餐饮的人都“倾听”此操作：

成分减少剂应解析成分原始信息从服务器获取到强制转换成分对象，然后存储他们在商店里。
膳食减少器应该解析所取得的膳食原始信息从服务器进入转换Mael对象，并将它们存储在存储。

但是这里变得棘手 - 如果减餐者试图创造一个包含尚未在商店中的成分的膳食对象（成分减少剂还没有将它们加载到商店）呢？

我该如何解决这个问题？在此先感谢：）

已更新

代码示例：抓取操作看起来像这样：

export function fetchAllDataFromDB() {
    return dispatch => {
        axios.get('http://rest.api.url.com')
            .then(response => {
                dispatch({
                    type: FETCH_ALL_DATA_FROM_DB,
                    payload: response.data
                })
            })
            .catch(error => {
                console.log(error)
            })
    }
}

成分减少剂看起来像这样：

export default function reducer(state={}, action) {

    switch (action.type) {
        case FETCH_ALL_DATA_FROM_DB: {
            // Create the Ingredient objects from the payload
            // They look like Ingredient(id, name, amount)

        }
    }

    return state
}

减肥机看起来像这样：

export default function reducer(state={}, action) {

    switch (action.type) {
        case FETCH_ALL_DATA_FROM_DB: {
            // Create the Meal objects from the payload
            // They look like Meal(id, name, price, ingredients_ids)
            // It will try to fetch the ingredients (of ingredients_ids) from the store - and fail, because hey are not there yet.
        }
    }

    return state
}

问题是 - 在完成ingredints reducer并将相关成分加载到商店之前，您无法创建Meal对象。

已更新

我还没有真正解决问题，但我做的是：我更改了Meal构造函数，因此它不会从商店中获取Ingredient对象，但会坚持使用ingredients_ids列表。我还添加了一个从商店中取出Meal对象的getter。这种方式可能会更好，因为现在我可以改变膳食由动态组成的成分（不是我想要的......）。它的效率低...... 如果你找到了一个更好的解决方案，我真的很想知道。

感谢您的帮助：）

Answer 1

我认为您可以在javascript中搜索有关异步的主题。

通常，如果您希望在运行其他方法之前等待2个或更多操作完成。您可以使用Promise.all()，或将回调嵌套到回调地狱或使用async.series()库。回到redux，您可以确保在渲染（dispatch（））之前所有队列都已完成运行

我的建议也是学习Promise而不是异步库。

示例案例：

fetch().then( res => dispatch({type: "I_GET_THE_DATA", payload: res.data}))

如果你愿意，你甚至可以链接。

fetch(mealURL).then( res1 =>{
   fetch(ingredientsURL).then(res2 => {
       var meal_and_ingredients = {
          meal: res1,
          ingredients: res2
       }


       dispatch({type: "GET_TWO_DATA", payload: meal_and_ingredients})
   })
})

React Redux - 管理Reducer之间的依赖关系

1 个答案: