React学习笔记5：学习Redu

好久没写东西了！！！！
Redux是React官方推荐数据流管理方法Flux的实现之一，当然Redux是非必选，仅仅是众多实现中可选项罢了，不过是最大众选择！

Redux的详细介绍可以看下其他童鞋的文章，比如：[Redux 介绍]，总之一搜有很多文章，本文直接引导如何使用。

1、搭建一个基础Hello world的React项目，参考React学习笔记1：环境搭建

import React from 'react'import ReactDom from 'react-dom'class Hello extends React.Component{    constructor(props) {        super(props)    }    render() {        return (                Hello World        )    }}ReactDom.render(    ,    document.getElementById('example'));

2、修改相关代码，点击一个button，翻译Hello world为『您好，世界』

import React from 'react'import ReactDom from 'react-dom'class Hello extends React.Component{    constructor(props) {        super(props)        this.state = {info:'Hello World!'}    }    changeLang() {        this.setState({info:'您好,世界!'})    }    render() {        return (                翻译 {this.state.info}        )    }}ReactDom.render(    ,    document.getElementById('example'));

3、js有太多的语法糖，上面onClick绑定changeLang方法，在es6下也存在多种实现，比如还有如下：

this.changeLang()}>翻译 {this.state.info}

如果使用更新的es7语法stage-0标准，还可如下实现：

//webpack.config.js 增加如下配置            query: {                presets: ['es2015','stage-0','react']            }//函数书写方式变化    changeLang = () => {        this.setState({info:'您好,世界!'})    }    render() {        return (                翻译 {this.state.info}        )    }

4、引入Redux支持

npm install --save redux

5、Redux的核心就是Actions、Reducers 和 Store，通俗点理解，Store存储了一颗数据总树，保存了整个应用程序的一切数据。数据的变动，或者触发数据变动的事件，都会生成一个Actions（类似消息，Flux提供了消息封装标准），Reducers是监听所有Actions的函数，根据Actions不同，做相应的处理
6、如上所说，首先我们要为整个应用创建一个全局的Store

import {createStore} from 'redux'//此store可以存在全局，示例程序暂时存在redux组件内（constructor中）this.store = createStore(this.reducer.bind(this))

7、Actions监听执行者，也即Reducers，单独的函数，如下

     //此处定义了两个消息，每个消息完成自己的任务后，把数据状态在返回出去     //reducer       reducer(state = {},action) {        console.log('reducer init state ',state,' action ',action);        switch (action.type) {            case 'chinese':                //do something                return {                    state,                    msg:'您好,世界!'                }                break;            case 'english':                //do something                return {                    state,                    msg:"Hello World!"                }                break;            default:                return state        }    }

8、OK，发送一个消息！消息一般都是由一个Actions指定，Actions其实也是一个函数，消息类型就是json对象

    sendShowChineseMsg = () => {        return {            type:'chinese'        }    }

9、分发消息吧，刷新页面，打开Console，点击翻译，看下消息详情

    changeLang = () => {        //this.setState({info:'您好,世界!'})        this.store.dispatch(this.sendShowChineseMsg())    }

//第一遍是系统初始化，系统发出init消息，第二次刷新可以看到chinese消息，第三次刷新会把前一次的状态及消息发出来reducer init state  Object {}  action  Object {type: "@@redux/INIT"}bundle.js:99 reducer init state  Object {}  action  Object {type: "chinese"}bundle.js:99 reducer init state  Object {state: Object, msg: "您好,世界!"}  action  Object {type: "chinese"}

10、ok，接收消息做出响应（利用store的subscribe方法，执行监听），看下效果！

        this.store.subscribe(() => {            console.log('store_0 has been updated. Latest store state:', this.store.getState());            // 更新你的React数据            this.setState({info:this.store.getState().msg})        })

11、如上已经完成了消息的创建、传递、处理，而且完全融合在React中，不过Redux跟React融合在一起，官方提供更好的react-redux融合，我这样去做，只是更好的去理解Redux
12、点击完翻译后，5s后自动翻译回英文

    changeLang = () => {        //this.setState({info:'您好,世界!'})        this.store.dispatch(this.sendShowChineseMsg())        setTimeout(()=>{            this.store.dispatch(this.sendShowEnglishMsg())        },5000)    }    sendShowEnglishMsg = () => {        return {            type:'english'        }    }

13、放出完整示例

import React from 'react'import ReactDom from 'react-dom'import {createStore} from 'redux'class Hello extends React.Component{    constructor(props) {        super(props)        this.state = {info:'Hello World!'}        this.store = createStore(this.reducer)        this.store.subscribe(() => {            console.log('store_0 has been updated. Latest store state:', this.store.getState());            // 更新你的React数据            this.setState({info:this.store.getState().msg})        })    }    changeLang = () => {        //this.setState({info:'您好,世界!'})        this.store.dispatch(this.sendShowChineseMsg())        setTimeout(()=>{            this.store.dispatch(this.sendShowEnglishMsg())        },5000)    }    sendShowChineseMsg = () => {        return {            type:'chinese'        }    }    sendShowEnglishMsg = () => {        return {            type:'english'        }    }    reducer = (state = {},action) => {        console.log('reducer init state ',state,' action ',action);        switch (action.type) {            case 'chinese':                return {                    state,                    msg:'您好,世界!'                }                break;            case 'english':                return {                    state,                    msg:"Hello World!"                }                break;            default:                return state        }    }    render() {        return (                翻译 {this.state.info}        )    }}ReactDom.render(    ,    document.getElementById('example'));

关键字：react.js, Redux

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！