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

kx5bkwkv 于 2022-11-24 发布在 React

关注(0)|答案(3)|浏览(110)

我是新的React，React Native和Redux，所以我试图 Package 我的头周围的很多这些新闻概念在过去几天。
我现在遇到的一个问题是在Action Creator中计算新数据，在将其 Package 在Action对象上并传递到Reducer之前，这需要状态树中其他分支的一段数据。您通常会如何着手解决这个问题？改变全局状态树的结构还是将这段数据Map到需要它的组件？
给定状态树：

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

而且，假设每个分支由不同的归约器处理，并且每个分支的数据作为道具传递到单独的组件。
下面是一个场景（我正在使用Redux将React tutorial转换为React Native）：
1.在SubmitForm中单击“提交”按钮
1.--〉分派一个动作来通知存储正在发送数据，然后异步抓取并发送{title，text}到API服务器。
1.成功后---〉计算从API服务器返回的dataSource，并将结果dataSource传递给reducer（根据教程）。计算dataSource，我指的是dataSource.cloneWithRows（....）（解释了here），它需要来自ListView的dataSource，如上所示。
所以我的想法是Form组件不应该有一个名为dataSource的属性，因为它来自状态树中的另一个分支。但是没有它，我不确定如何获得所需的dataSource。改变（在本例中合并ListView和SubmitForm）状态树的结构也会很奇怪，因为我对Redux模式的理解。所以有人能帮助我解决这个问题吗？谢谢

redux

来源：https://stackoverflow.com/questions/36526908/how-to-compute-data-using-elements-from-different-branch-of-state-tree-in-redux

3条答案

按热度按时间

bvjxkvbb1#

谢谢大家。我想我找到了使用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
        })
    }    
}

赞(0）回复(0）举报 2022-11-24

eiee3dmh2#

我以前也想过这个问题，我觉得这可能是一个办法。
例如，你有actionA，reducerA和branchA的商店。你有actionB，reducerB和branchB的商店。
现在，您希望同时读取branchA和branchB并更改它们。
好，让我们定义两个动作。
一个在动作A（子动作A）中，用于更改分支A。另一个在动作B（子动作B）中，用于更改分支B。
然后，定义一个总动作（total-action），它将依次调用子动作A和子动作B。
最后一个问题是“如何读取子动作A中的分支B”。
好的，我们可以使用store的getState方法。我们将store导入actionA，并调用store.getState()它将返回store的整个树。

赞(0）回复(0）举报 2022-11-24

rwqw0loc3#

这是一个常见的问题，Redux FAQ中有一个很方便的答案。
简短版本：combineReducers解决了一个按域/状态片拆分Reducer功能的简单用例。您已经完成了这个任务，现在需要添加自定义的额外顶级Reducer逻辑来处理这个动作，或者在动作本身中包含额外的所需数据。

赞(0）回复(0）举报 2022-11-24