redux 快速入门5分钟

基本概念

Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

Redux 帮你管理“全局”状态 - 哪些应用程序的许多部分都需要的状态。

Redux 提供的模式和工具使您更容易理解应用程序中的状态何时、何地、为什么以及如何更新，以及当这些更改发生时您的应用程序逻辑将如何表现. Redux 指导您编写可预测和可测试的代码，这有助于让您确信您的应用程序将按预期工作

搭建基础框架

import React from 'react'
import ReactDom from 'react-dom'

class Hello extends React.Component
{
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                Hello World
            </div>
        )
    }
}

ReactDom.render(
    <Hello />,
    document.getElementById('example')
);

修改代码，添加事件

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: 'Hello, world!'})
    }
    render() {
        return (
            <div>
                <button onclick = {this.Changelang.Bind(this)}> translation </button> {this.State.Info}
            </div>
        )
    }
}

ReactDom.render(
    <Hello />,
    document.getElementById('example')
);

安装redux依赖

npm install --save redux

添加redux的三大核心，actions，reducers，store.

import {createStore} from 'redux'
//This store can exist globally, and the sample program is temporarily stored in the Redux component (in the constructor)
this.store = createStore(this.reducer.bind(this))

reducer(state = {},action) {
        console.log('reducer init state ',state,' action ',action);
        switch (action.type) {
            case 'chinese':
                //do something
                return {
                    state,
                    MSG: 'Hello, world!'
                }
                break;
            case 'english':
                //do something
                return {
                    state,
                    msg:"Hello World!"
                }
                break;
            default:
                return state
        }
    }

定义一个发送消息函数，发送送的数据格式是json

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

修改原来的changLang函数，触发消息发送

changeLang = () => {
        //this. Setstate ({Info: 'Hello, world!'})
        this.store.dispatch(this.sendShowChineseMsg())
    }

监听消息发送

this.store.subscribe(() => {
            console.log('store_0 has been updated. Latest store state:', this.store.getState());
            //Update your react data
            this.setState({info:this.store.getState().msg})
})

整个代码结构

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());
            //Update your react data
            this.setState({info:this.store.getState().msg})
        })
    }

    changeLang = () => {
        //this. Setstate ({Info: 'Hello, world!'})
        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: 'Hello, world!'
                }
                break;
            case 'english':
                return {
                    state,
                    msg:"Hello World!"
                }
                break;
            default:
                return state
        }
    }
    render() {
        return (
            <div>
                < button onclick = {this. Changelang} > translation < / button > {this. State. Info}
            </div>
        )
    }
}

ReactDom.render(
    <Hello />,
    document.getElementById('example')
);