1

我是 React、React Native 和 Redux 的新手，所以在过去的几天里，我正试图围绕这些新闻概念展开思考。

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

给定状态树：

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

据说，每个分支都由不同的 reducer 处理，每个分支的数据作为 props 传递到单独的组件中。

这是场景（我正在使用 Redux 将React 教程翻译成 React Native）：

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

所以我的想法是表单组件不应该有一个名为 dataSource 的道具，因为它来自状态树中的另一个分支。但是没有它，我不确定如何实现所需的数据源。根据我对 Redux 模式的理解，更改（在这种情况下合并 ListView 和 SubmitForm）状态树的结构也会很奇怪。那么有人可以帮我解决这个问题吗？谢谢

4

3 回答 3

2

多谢你们。我想我通过使用 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
        })
    }    
}
于 2016-04-14T15:08:54.203 回答
1

我以前也想过这个问题，我认为这可能是一种方法。

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

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

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

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

然后，定义一个总动作（total-action），依次调用sub-actionA和sub-actionB。

最后一个问题是“如何在 sub-actionA 中读取 branchB”。

好的，我们可以使用 store 的 'getState' 方法。我们将 store 导入到 actionA 中，调用 store.getState() 它将返回整个 store 树。

于 2016-04-10T08:14:38.643 回答
1

这是一个常见问题，在Redux FAQ中很容易找到答案。

简短版：combineReducers解决了一个简单的用例，即按域/状态片拆分 reducer 功能。您已经超越了这一点，现在需要添加自定义的附加顶级 reducer 逻辑来处理此操作，或者在操作本身中包含其他所需的数据。

于 2016-04-11T00:21:03.400 回答