Redux

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了。

All Actions are automatically sent to all reducers!

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

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

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

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

render APP的内容。

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

这个部分有点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.

这里涉及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。

<Userlist />其实就是render 一个UserList Component

reducers:

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

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

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