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

2022-01-26 10:28:48

权当暂记

    日后再行补充完善，若有阅读者，请翻到下文黄色标题‘从这里开始’起阅读。本文以一个最简单的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'

}

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

个人公众号：

码农公寓