如何使用 Redux React Native 中状态树不同分支的元素计算数据？

Question

我是 React、React Native 和 Redux 的新手，所以在过去的几天里，我一直在努力思考这些新闻概念。

我现在运行遇到的一个问题是在 Action Creator 中计算新数据，然后将其包装在 action 对象上并传递到 reducer 中，这需要来自其他 b运行ch 的一段数据在状态树中。你通常会如何解决这个问题？更改全局状态树的结构或将此数据映射到需要它的组件？

给定状态树：

{
    ListView:{
        dataSource : a ListView.DataSource type
    }
    SubmitForm:{
        title : 'name of title',
        text : 'description'
    }
    isFetchingData: true/false
}

据推测，每个 b运行ch 由不同的 reducer 处理，每个 b运行ch 的数据作为 props 传递到单独的组件中。

场景如下（我正在运行将 React tutorial 设置为使用 Redux 的 React Native ）：

在 SubmitForm 中单击提交按钮
--> 调度一个动作来通知商店数据正在发送，然后异步抓取并将 {title,text} 发送到 API 服务器。
成功后 ---> 计算从 API 服务器返回的数据源并将结果数据源传递给 reducer（根据教程）。通过计算数据源，我的意思是 dataSource.cloneWithRows(....)（解释为 here），这需要来自 ListView 的数据源，如上所示。

所以我的想法是 Form 组件不应该有一个名为 dataSource 的道具，因为它来自状态树中的另一个 b运行ch。但是没有它，我不确定如何获得所需的数据源。根据我对 Redux 模式的理解，更改（在这种情况下合并 ListView 和 SubmitForm）状态树的结构也将是 st运行ge。那么有人可以帮我解决这个问题吗？谢谢

Answer 1

之前也想过这个问题，我觉得这可能是个办法

例如。您有商店的 actionA、reducerA 和 branchA。您有商店的 actionB、reducerB 和 branchB。

现在您想同时读取branchA和branchB并更改它们。

好的，让我们定义两个动作。

一个在actionA(sub-actionA)中，改变branchA。另一个在 actionB(sub-actionB) 中，改变 branchB.

然后，定义一个总动作(total-action)，它会依次调用子动作A和子动作B。

最后一个问题是"How to read branchB in the sub-actionA"。

ok，我们可以使用store的方法'getState'。我们将商店导入到 actionA 中，然后调用 store.getState() 它将 return 整个商店树。

Answer 2

这是一个常见问题，在 Redux FAQ 中可以方便地找到答案。

简短版本：combineReducers 通过 domain/slice-of-state 解决了拆分 reducer 功能的简单用例。您已经超越了这一点，现在需要添加自定义的额外顶级 reducer 逻辑来处理此操作，或者在操作本身中包含额外的所需数据。

Answer 3

谢谢大家。我认为我通过使用 redux-thunk 找到了最佳解决方案（好吧，我实际上是在使用 redux-thunk 来处理异步操作，但没有充分阅读 api）。基本上 thunk 也注入了 getState，所以基本上调用 getState() 将使我能够访问全局状态树，这应该可以解决我的问题。

const actionCreator = (args) => {
    return (dispatch,getState) => {
        // dispatch action to notify store that data is being sent
        fetch(url)
        .then((response) => response.json())
        .then((resData) => {
            // dispatch action to notify data received
            // compute new data using resData and current dataSource accessed by getState().ListView.dataSource
        })
    }    
}

如何使用 Redux React Native 中状态树不同分支的元素计算数据？

How to compute data using elements from different branch of state tree in Redux React Native?

react-native

redux

react-redux