日后再行补充完善,若有阅读者,请翻到下文黄色标题‘从这里开始’起阅读。本文以一个最简单的demo进行注释性理解,全部拷贝下去,就能运行的一个demo。
Rudex在我看来最本质做的事情就是将所有的State属性统一存储(一个属性就是一个注册到store的Reducer),然后用户触发事件,通过Redux修改State的状态(这里一定记住State只有一个,唯一唯一唯一),通过State状态影响Props状态,Props是与视图(JSX)直接挂钩的,从而达到刷新渲染视图的目的。
然后其中的关键就是修改State的状态,Redux构建出了Action,Reducer,connect(mapStateToProps,mapDispatchToProps)(component),container等这些玩意儿搞了一套规则进行“规矩化”的修改状态,其实也就是分工了下,分成了几个层级。暂且理解到这,新手学习,拙见若有误,前端娱乐圈的朋友请不要怜惜我,评论处见。一切为了学习进步。斗胆拿这个上首页。
- import React, { Component } from 'react'
- import PropTypes from 'prop-types'
- import ReactDOM from 'react-dom'
- import { createStore } from 'redux'
- import { Provider, connect } from 'react-redux'
- // React component 视图组件(component)的实现,定义了props(包括简单的数值,字符串还有函数对象)
- class Counter extends Component {
- render() {
- const {
- value,
- onIncreaseClick
- } = this.props
- return ( < div > <span > {
- value
- } < /span>
- <button onClick={onIncreaseClick}>Increase</button > </div>
- )
- }
- }
- / / 对props进行限定,如类型限定Counter.propTypes = {
- value: PropTypes.number.isRequired,
- onIncreaseClick: PropTypes.func.isRequired
- }
// Action 可以看作reducer中业务逻辑的路由,在mvc里不也是你要定义几个接口,就写几个action嘛,这个完全可以看作把action的名称单独拿出来作为一个路由的存在了,以至于这里没有单独的如mvc里的路由模块。
- const increaseAction = {
- type: 'increase'
- }
//所有注册在store中的Reducer名称组合起来就是全局的state对象)才可以在下面的connect中的mapStateToProps、mapDispatchToProps中使用state
// b、Reducer 定义了一个或多个action的处理逻辑,而这多个action的处理逻辑怎么区分的呢,是靠传进来的参数action的一个属性字段type进行唯一性区分(可以将换这个type看作action之于Reducer的路由)
// c、
//这么看,其实Reducer就相当于一个controller,里面有多个action处理逻辑。
//好的,再回头看provider, Provider在根组件(App)外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。
//一结束,看二。
- function counter(state = {
- count: 0
- }, action) {
- const count = state.count
- switch (action.type) {
- case 'increase':
- return {
- count: count + 1
- }
- default:
- return state
- }
- }
//所以主要是看reducer(这里的ruducer实例:counter)里有什么。
- const store = createStore(counter)
- function mapStateToProps(state) {
- return { value: state.count }
- }
// 这样一来,事先定义的action-->reducer-->store就跟我们最顶层的dom关联起来了。说白了就是定义了套规则,在我粗鄙的看来,也是个mvc。
- function mapDispatchToProps(dispatch) {
- return {
- onIncreaseClick: () = >dispatch(increaseAction)
- }
- }
// Counter是上面定义的视图组件,你就直接看成这个是dom,dom里面需要显示东西(props)跟触发事件(函数类型props),显示跟触发这些东西就是定义在其中两个参数中。
// 第一个参数mapStateToProps作用:显示东西。简答说就是通过state作为输入参数,进行一堆操作或者不操作,给props赋值(因为我们显示东西总是跟props关联的)
// 第二个参数mapDispatchToProps作用:事件绑定。
- const
- App
- =
- connect
- (mapStateToProps
- ,
- mapDispatchToProps)(Counter)
//一、Provider是react-redux提供的,先不深究。 store实例作为根节点元素与我们的组件进行‘绑定’,往上看啥是strore
//二、上面说的主要是定义了一堆规则进行状态state,action及其处理逻辑,现在要跟我们的组件结合起来,即上面最终的处理逻辑如何关联我们某个dom的事件触发(如onClick),这是我们最关心的。
// 所以看我们的App组件
- class RudexDemo extends Component {
- render() {
- return ( < Provider store = {
- store
- } > <App / ></Provider>
- );
- }
- }
- export default RudexDemo;/
1、State的初始化在哪儿呢?答案:所有的Reducer(注意是要注册要Store上的)构成了这个State,Reducer名称为State属性的名称,Reducer中第一个参数State里定义的参数类型就是State属性的类型。这个很重要!
2、State是一个全局的状态对象,这个对象是唯一的唯一的唯一的,跟component,Reducer什么的没有直接关联。记住就一个State,我们所有的操作都是为了改变这个State里面的部分属性值,从而达到刷新渲染页面的目的。
3、所有在component中需要与reducer挂钩的事情,都通过props让containers里去进行调用。这样分离合乎规矩。
来源: http://www.cnblogs.com/joeymary/p/7820047.html