React之Redux

Posted 2021-01-14 qiaohong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之Redux相关的知识，希望对你有一定的参考价值。

　　本文简单的说下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的主要内容，如果未能解决你的问题，请参考以下文章

React之React-redux数据流转流程

Redux 进阶之 react-redux 和 redux-thunk 的应用

react前端进阶之个人浅见1

React之react-redux的使用与项目的打包

react状态管理器（分模块）之redux和redux + react-redux + reducer和redux + react-redux + reducer分模块 + 异步操作redux-thu

React入门之Redux：react-redux基本使用