React之Redux

时间：2018-10-21 10:54:43 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：ons ice 对象现在 stat select name ack break

　　本文简单的说下redux。

　　首先这有张网页，里面有文字和内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ReactDemo</title>
</head>
<body>
    <div id="title"></div>
    <div id="content"></div>
    <div id="root"></div>
</body>
</html>

　　现在让这个网页通过状态来显示标题和内容。

let state = {
    title:{
        color:‘red‘,
        text:‘标题‘
    },
    content:{
        color:‘blue‘,
        text:‘内容‘
    }
}

function renderTitle(){
    let title = document.querySelector(‘#title‘);
    title.style.background = state.title.color;
    title.innerHTML = state.title.text;
}

function renderContent(){
    let content = document.querySelector(‘#content‘);
    content.style.background = state.content.color;
    content.innerHTML = state.content.text;
}

//渲染的方法
function render(){
    renderTitle();
    renderContent();
}

render();

　　这有个问题，首先状态不能是全局的，也不应该哪个方法都可以直接更改，这样做很危险，所以需要提供一个更改状态的方法，修改这状态的时候提供一个对象带有type类型的dispath来修改状态。

//先定义好需要干那些事情（常量）宏
const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR‘;
const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT‘;

let state = {
    title:{
        color:‘red‘,
        text:‘标题‘
    },
    content:{
        color:‘blue‘,
        text:‘内容‘
    }
}
//派发时一个将修改的动作提交过来
//参数{type:‘‘,载荷}
function dispatch(action){    //派发的方法，这里要更改的状态
    switch(action.type){
        case CHANGE_TITLE_COLOR: 
            state.title.color = action.color;
            break;
        case CHANGE_CONTENT_TEXT :
            state.content.text = action.text;
            break;
        default:
            break;
    }
}


function renderTitle(){
    let title = document.querySelector(‘#title‘);
    title.style.background = state.title.color;
    title.innerHTML = state.title.text;
}

function renderContent(){
    let content = document.querySelector(‘#content‘);
    content.style.background = state.content.color;
    content.innerHTML = state.content.text;
}




//渲染的方法
function render(){
    renderTitle();
    renderContent();
}

render();
dispatch({type:CHANGE_CONTENT_TEXT,text:‘随便改的‘});
render();

　　但是这么写state还是能被外人调到，所以就有了Redux里面的store。

//先定义好需要干那些事情（常量）宏
const CHANGE_TITLE_COLOR = ‘CHANGE_TITLE_COLOR‘;
const CHANGE_CONTENT_TEXT = ‘CHANGE_CONTENT_TEXT‘;

function createStore(){
    
    let state = {
        title:{
            color:‘red‘,
            text:‘标题‘
        },
        content:{
            color:‘blue‘,
            text:‘内容‘
        }
    }

    let getState = () => state;
    
    //派发时一个将修改的动作提交过来
    //参数{type:‘‘,载荷}
    function dispatch(action){    //派发的方法，这里要更改的状态
        switch(action.type){
            case CHANGE_TITLE_COLOR: 
                state.title.color = action.color;
                break;
            case CHANGE_CONTENT_TEXT :
                state.content.text = action.text;
                break;
            default:
                break;
        }
    }
    //将方法暴露给外面使用
    return {dispatch,getState}
}


let store = createStore();

function renderTitle(){
    let title = document.querySelector(‘#title‘);
    title.style.background = store.getState().title.color;
    title.innerHTML = store.getState().title.text;
}

function renderContent(){
    let content = document.querySelector(‘#content‘);
    content.style.background = store.getState().content.color;
    content.innerHTML = store.getState().content.text;
}




//渲染的方法
function render(){
    renderTitle();
    renderContent();
}

render();
store.dispatch({type:CHANGE_CONTENT_TEXT,text:‘随便改的‘});
render();

React之Redux

标签：ons ice 对象现在 stat select name ack break

原文地址：https://www.cnblogs.com/qiaohong/p/9824215.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行