正确的Redux使用常规问题

时间:2017-11-16 21:20:51

标签: javascript reactjs redux

我有点不确定Redux如何与React联系(不使用ReactRedux库)。假设以下组件结构

App
--TodoListController
----SomeComponent1
----TodoList
------TodoItem
--ProfileController

问题1.哪些组件应该监听更改?

我假设在redux main(和only)商店中订阅状态更改的正确组件应该分别是TodoListController和ProfileController(基本上是非表示组件)。

这是正确的假设或所有组件是否应该监听状态并呈现他们感兴趣的内容?我基本上不知道哪个组件应该听取状态变化,而且只是在猜测

问题2.处理网络电话:

我知道每个案件都要进行检查,但无论如何都要提到它。目前我正在以下列方式处理网络呼叫:
A)当TodoListController安装时,我从主存储器获取状态,并向服务器发出请求以获取最新数据。我也在听商店的变化。所以在实践中:

class TodoListController extends React.Component{

componentWillMount(){
    mainStore.subscribe()
    getDataFromServer(function(data){
        mainStore.dispatch(data)
    })
}

getDataFromStoreAndUpdate(){
    this.state.datawecarefor = mainStore.todoReducer.data
    //set the state here to trigger a rerender
}

componentWillUnmount(){
    mainStore.unsubscribe()
}

render(){
 //render whatever component here that uses this.state.datawecarefor
}
}

你认为这种方法存在明显的缺陷吗?我不知道我现在还不知道。

问题3.在哪里存储相关的帮助函数?

我目前有一个减速机,可以容纳各种用户的所有玩家。目前,当redux存储状态更新时,我检索所有这些数据并迭代它以找到感兴趣的用户。这不应该在控制器本身中,而是作为一个肝功能。我想在Redux商店周围创建一个包装器,它是减少器来创建像getTodoListForUser(userId)这样的函数,但我不知道这是不是正确的方法。你如何处理这样的逻辑?

P.S:很多人都会指出我应该使用ReactRedux库来进行许多优化,他们可能是正确的。然而,这不是一个生产项目,只有一个我试图将这两个库的核心更好地整合在一起,然后再转向更优化的东西。

1 个答案:

答案 0 :(得分:2)

我知道你不想使用ReactRedux,但幸运的是有一段Dan Abramov的视频解释了源代码。你应该看一下,它会解释为什么他们做了他们做的事以及他们是如何做到的。当我第一次学习redux和react如何协同工作时,它变得更加清晰(然后我还是使用了ReactRedux)。)。

https://www.youtube.com/watch?v=VJ38wSFbM3A

关于将React App连接到redux商店的地方存在很多争论。但是,大多数情况下建议您在符合逻辑意义的地方进行连接。例如,如果您有一个包含大量注释的容器组件,则无需连接所有注释,只需连接容器即可。同样,您不仅希望将整个应用程序连接到顶部,因为差异和更新应用程序的成本更高。

另外请注意,您应该尝试在redux中间件中处理网络调用,并调度您的反应组件捕获的操作以进行渲染。

相关问题