初识React-Redux之粗暴理解入门

时间:2021-11-07 05:48:16

权当暂记

    日后再行补充完善,若有阅读者,请翻到下文黄色标题‘从这里开始’起阅读。本文以一个最简单的demo进行注释性理解,全部拷贝下去,就能运行的一个demo。
    Rudex在我看来最本质做的事情就是将所有的State属性统一存储(一个属性就是一个注册到store的Reducer),然后用户触发事件,通过Redux修改State的状态(这里一定记住State只有一个,唯一唯一唯一),通过State状态影响Props状态,Props是与视图(JSX)直接挂钩的,从而达到刷新渲染视图的目的。
    然后其中的关键就是修改State的状态,Redux构建出了Action,Reducer,connect(mapStateToProps,mapDispatchToProps)(component),container等这些玩意儿搞了一套规则进行“规矩化”的修改状态,其实也就是分工了下,分成了几个层级。暂且理解到这,新手学习,拙见若有误,前端娱乐圈的朋友请不要怜惜我,评论处见。一切为了学习进步。
初识React-Redux之粗暴理解入门

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'
}

1.2、 a、Reducer 定义了(初始化了)state,初始化了state(一个Reducer就是一个state里的一个属性,属性类型也是这里定义的,这个demo如果console.log(state);则结果为state:{counter:{count:0}}

//所有注册在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
    }
}

1.1、 Store *,全局唯一,根据reducer生成的store“实例”,暂且只看作一个与reducer进行匹配的一种模式,不深究其作为状态树什么的地位。

//所以主要是看reducer(这里的ruducer实例:counter)里有什么。

const store = createStore(counter)

2.2、 Map Redux state to component props prop对象用state的值进行操作后赋上值,这里的state对象里面有什么,哪儿定义的呢?就是最上面讲store的时候,store里的reducer里定义的。想起来了吧。

function mapStateToProps(state) {
    return { value: state.count }
}

2.3、Map Redux actions to component props事件绑定,但是呢,不直接写逻辑,而是用dispatch与事先定义的action进行关联。action相当于节点路由了,根据路由(action.type)在reducer(相当于controller)找到对应处理逻辑。

// 这样一来,事先定义的action-->reducer-->store就跟我们最顶层的dom关联起来了。说白了就是定义了套规则,在我粗鄙的看来,也是个mvc。

function mapDispatchToProps(dispatch) {
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    }
}

2.1Connected Component 、看了这行代码,先不管其中的参数啥意义,我们首先了解这行代码意义是什么,就是前面说的关联。

// 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

个人公众号:
初识React-Redux之粗暴理解入门