脚本宝典收集整理的这篇文章主要介绍了React 教程第十一篇 —— Redux 简介和简单实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_126_0@

redux

前端框架的组件式开发永远有一道鸿沟——跨组件通信。我在 Vue 教程中有提到过，如果对跨组件通信不明白的可先跳过去看看。

React 不同与双向数据绑定框架，它是单向数据流，所以每次更新都得调用setState，所以在跨组件通信中会比较迂回。还有就是 React 没有逻辑分层，在开发过程中，逻辑分层是很重要的。

Redux 实现了跨组件通信和逻辑分层的好处，所以在 React 中使用 Redux 更配。

Redux 简单实现

为了说明问题，先来一个公共对象实现跨组件通信。当然这个也是 flux 的实现原理。

actions.js

export default {
    increment(){
        return {
            tyPE: "+"
        }
    },
    decrement(){
        return {
            type: '-'
        }
    }
}

reducer

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component

import React, {Component} From 'react'
import {createstore} from 'redux'
import Actions from './actions'
import Reducer from './reducer'

const store = createStore(Reducer);

export default class Component1 extends Component{
    constructor(PRops){
        super(props);
        this.state = {count: 0}
    }
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState()
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp1-{this.state.count}</h3>
                <input type="button" value="increment" onClick={this.increment}/>
            </div>
        )
    }
}

小结——分层

@H_777_202@

Actions 层

• 用户行为操作，由用户在 View 层触发 store.dispatch(Actions.increment());
• 行为操作应该为一个 function且必须返回有type属性的对象
• 每个方法都应该由store进行派发。

Reducer 层

• 必须是一个纯函数(一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用)
• 接受两个参数，第一个为state，另一个为action
• return的结果可以用store.getState()来接收

Store 层

• redux的一个方法，接受reducer，返回一个对象store
• 对象store的方法dispath用于派发action
• 通过dispath派发的action会触发reducer

View 层

• 视图层，也就是组件
• 通过getState()获取的值然后再setState便可以显示。

脚本宝典总结

以上是脚本宝典为你收集整理的React 教程第十一篇 —— Redux 简介和简单实现全部内容，希望文章能够帮你解决React 教程第十一篇 —— Redux 简介和简单实现所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。