Redux

Redux_第1张图片

https://github.com/buckyroberts/React-Redux-Boilerplate

https://redux.js.org/docs/basics/Actions.html

https://www.youtube.com/watch?v=F59Z80p1Bcw&list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a&index=2

理解: Redux用一个Store来储存所有的data,如果update的时候涉及某些component, 这些component里的data会由provider一起update了

Redux_第2张图片


Redux_第3张图片

All Actions are automatically sent to all reducers!

这个function实际上叫actionCreator, 会创建一个action object return回去。这个action包含信息为 User-selected, payload为user。

Redux_第4张图片

假设这部分是我们一开始想要input的data。


Redux_第5张图片


Redux_第6张图片
Redux_第7张图片

Main Page.   import其他所有functionality to here.

创建Store, 创建Logger. Store里有allReducers data.

render APP的内容。

Redux_第8张图片

combineReducer这一步很关键,因为整个data store是包含一个Single Unit of Data. 有点像一个大包包住的class。这里的store 就交allReducers


Redux_第9张图片
Redux_第10张图片

这个部分有点Tricky,这里定义了一个Component应该是什么样子的。

这里实际上是Container部分,我们只选取Data Store里有用的部分显示出来

bindActionCreators   让某个component拥有某个action功能。

connect(mapStateToProps, matchDispatchToProps)(userList)

这个是让userList这个component具备我们之前的action功能,让component pay attention to state and action.

当然我们在component里也需要写onClick=...  这个语法很Tricky, key也很Tricky。

Also 这个userList iterate users.

Redux_第11张图片

这里涉及react state和props的应用。

connect mapStatetoProps to userDetails 这样的话  userDetail这个Component里就有了一个叫user的property  然后这个property 值设为  state.activeUser.

state.activeUser是从reducer/index.js里拿过来的,我不是很知道怎么做到的。。。也没看到import?   State指的是state of entire store. 我们之所以可以这么用是因为Container 属于Component App里,被App 调用了。所以Provider Store 给App的话,也就相当于Store给了Container. 这样ReactJS access Redux Store里的data就可以通过connect(mapStateToProps)(reactComponent)的方法,把store里的data 以props的形式传给component,然后display在js上。要对Store里的东西进行操作的话,connect(matchDispatchToProps)(component)

这时候,大家肯定很好奇reducers和之前定义的那些reducer.js 干嘛的。 reducer主要是用来在Action发生后,update store里的data用的。所以呢,我们会注意到mapStateToProps里的属性其实有所不同for different component. 有的只涉及users,有的涉及activte_user.  这样呢, 比如调用传入的matchDispatchToProps方法,aka, 某ActionCreator: selectUser的时候,就会有针对性的update 某种data, 如users or active_users 而不用update整个Store。

Redux_第12张图片


其实就是render 一个UserList Component


Redux_第13张图片

reducers:

自动!!!Listen to actions, 当Action being made, 它会用switch case判断是哪种action,然后返回某种payload。

Redux_第14张图片

把这个import 进allReducers, 这样集成一个Single Unit Reducers. 

这个Reducers里包含两块Memory 一个是users, 一个是all activateUsers.

Redux_第15张图片

你可能感兴趣的:(Redux)