【Redux】实例-1 - 东南西北

东南西北

整理 思考 行动

【Redux】实例-1

首页 编程 0 评

Redux介绍

官方理解:Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
我的理解:利用React、Vue等框架后,实现了系统的组件化开发,这些组件的状态管理由各自进行管理的话,维护起来将非常的复杂,如何由一个统一的状态管理容器来进行管理?这就是Redux存在的意义。

Redux例子

安装Redux

cnpm install redux --save

一个React组件
实现一个App组件,达到点击'+'或者'-'按钮达到对一个数子的+-操作,并显示出来
App.js:

import React from 'react'
import { Button } from 'antd-mobile'
class App extends React.Component{
    render(){
        const store = this.props.store;
        const add = this.props.add;
        const remove = this.props.remove;
        const num = store.getState();
        return (
            <div>
            <h1>total: {num}</h1>
            <Button type='primary' inline style={{width:'50%'}} onClick={()=>store.dispatch(add())}>+</Button>
            <Button type='warning' inline style={{width:'50%'}} onClick={()=>store.dispatch(remove())}>-</Button>
            </div>
        )
    }
}

export default App

点击Button时,通过store对象来分发事件,通过该描述就知道我们在调用该组件时,要传入Redux对象和分发的事件。
redux管理文件
index.redux.js:

const ADD= '+';
const REMOVE='-';

export function counter(state = 0, action) {
    switch (action.type) {
        case ADD:
            return state + 1
        case REMOVE:
            return state - 1
        default:
            return 0
    }
}

export function add(){
    return {type:ADD}
}

export function remove(){
    return {type:REMOVE}
}

上述代码导出了3个方法:
counter方法:对应了Redux的Reducer概念,即根据传入的 Action 对象去修改状态树。
add和remove方法:分别返回了一个Action,即描述“发生了什么事情。
在视图上表现出来
index.js:

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { counter,add,remove } from './index.redux'
const store  =  createStore(counter);
function render(){
    ReactDom.render(<App store={store} add={add} remove={remove}  />,document.getElementById('root'));
}

render()
store.subscribe(render)

我们注意到这里用subscribe来实时刷新了页面状态。
so easy!

【TP3.2】集成阿里大于