Rudex的使用方法与总结

时间: 2020-10-31｜130次围观｜0 条评论

Rudex的使用方法与总结

Redux是什么

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器（即数据状态管理框架）。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。

Redux的工作原理

Rudex的使用方法与总结插图

Redux的使用步骤

环境准备

  1. 安装redux
	cnpm install -D redux
  1. 文件准备：在src目录下新建store文件夹，用来存放所有和redux有关的文件。

创建图书记录本（Reducer）

  1. 在store文件夹中创建reducer.js文件，用来存储数据。
  2. 在reducer.js中创建需要使用的初始state数据，并对外暴露一个返回state的函数，用来处理任务并返回处理结果。
	const defaultState = { 
	    defaultValue: "要借什么书",
	};
	export default (state = defaultState, action) => { 
	    return state;
	}

招聘图书管理员（store）

  1. 在store文件夹中创建index.js文件，用于实现三方通讯（记录本、用户、展示大屏）。
  2. 在index.js中引入redux：
	import {  createStore } from "redux"
  1. 在index.js中创建store，并进行暴露，以供外部调用。
	const store = createStore();
	export default store;
  1. 在index.js中引入reducer：（职责相当于将记录本给管理员）。
	import reducer from "./reducer"
  1. 在index.js中正式使用reducer：（职责相当于正式交接记录本）
	import {  createStore } from "redux";
	import reducer from "./reducer";
	const store = createStore(
	    reducer
	);
	export default store;
  1. 在index.js中添加可在chrome浏览器中进行调试的参数（调试需要安装Redux Devtools插件）
	import {  createStore } from "redux";
	import reducer from "./reducer";
	const store = createStore(
	    reducer
	    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
	);
	export default store;

书籍使用情况展示屏（React Component）

  1. 引入store
	import store from "../store/index";
  1. 在组件的构造函数中获取redux中存储的数据
	constructor(props) { 
	  super(props);
	   // 获取redux中存取的数据
	   this.state = store.getState();
	}
  1. 简单渲染
	import React, {  Component } from 'react';
	import store from "../store/index";
	class ReduxComponent extends Component { 
	    constructor(props) { 
	        super(props);
	        this.state = store.getState();
	    }
	    render() { 
	        return (
	            <button>{ this.state.inputValue}</button>
	        );
	    }
	}
	export default ReduxComponent;

借书人

  1. 创建action（职责相当于借书人在展示屏上选择要借的数）
	import React, {  Component } from 'react';
	import store from "../store/index";
	class ReduxComponent extends Component { 
	    constructor(props) { 
	        super(props);
	        this.state = store.getState();
	    }
	    btnClick=(e)=>{ 
	    	//创建action
	        const action = { 
	            type: "btnClick",
	            value: "爱吃沙拉的狮子"
	        }
	    }
	    render() { 
	        return (
	            <button onClick={ this.btnClick}>{ this.state.inputValue}</button>
	        );
	    }
	}
	export default ReduxComponent;
  1. action传给store（职责相当于图书管理员要收到借书人要借什么书）
	import React, {  Component } from 'react';
	import store from "../store/index";
	class ReduxComponent extends Component { 
	    constructor(props) { 
	        super(props);
	        this.state = store.getState();
	    }
	    btnClick=(e)=>{ 
	        const action = { 
	            type: "btnClick",
	            value: "爱吃沙拉的狮子"
	        }
	        //action传给store
	        store.dispatch(action);
	    }
	    render() { 
	        return (
	            <button onClick={ this.btnClick}>{ this.state.inputValue}</button>
	        );
	    }
	}
	export default ReduxComponent;

此时在reducer.js中便能拿到state之前的数据（上次最新的图书管理数据）、action（本次将要外借的书，即本次要干的事情）。

记录本查看数据并进行修改

  1. reducer.js文件中处理数据并返回新的数据给store
	const defaultState = { 
	    inputValue: "要借什么书",
	};
	export default (state = defaultState, action) => { 
	    console.log(state,action);
	    if (action.type === "btnClick") { 
	        // 对旧的state做一次深拷贝
	        const newState = JSON.parse(JSON.stringify(state));
	        // 修改reducer中的inputValue
	        newState.inputValue = action.value;
	        // 返回newState
	        return newState;
	    }
	    return state;
	}

管理员接收数据更新显示大屏和借书结果

  1. store接受新的state
	import React, {  Component } from 'react';
	import store from "../store/index";
	class ReduxComponent extends Component { 
	    constructor(props) { 
	        super(props);
	        this.state = store.getState();
	        // 只要store中的数据发生变化就执行subscribe中的方法
	        store.subscribe(()=>{ 
	            this.setState(store.getState());
	        });
	    }
	    btnClick=(e)=>{ 
	        const action = { 
	            type: "btnClick",
	            value: "爱吃沙拉的狮子"
	        }
	        //action传给store
	        store.dispatch(action);
	    }
	    render() { 
	        return (
	            <button onClick={ this.btnClick}>{ this.state.inputValue}</button>
	        );
	    }
	}
	export default ReduxComponent;

至此，借书操作彻底执行完毕。

Redux的完整实例

src/store/reducer.js（图书使用情况记录本）

const defaultData = { 
    NotBorrow: ["你还要睡多久", "原来你还在这里", "时光还在，你还在", "爱在时光里", "恐怖女主播"], // 未借阅
    Borrowed: ["活着", "飘", "哈佛凌晨4点半", "罗生门", "梦里花落知多少"] // 已借阅
}
export default (state = defaultData , action) =>{ 
    console.log(state,action)
    if (action.type === "BorrowSucc"){ 
        const newState = JSON.parse(JSON.stringify(state));
        newState.NotBorrow.splice(newState.NotBorrow.findIndex(item => item === action.value), 1)
        newState.Borrowed.push(action.value);
        return newState;
    }
    return state;
}

src/store/index.js（图书管理员）

import {  createStore } from "redux";
import reducer from "./reducer";
const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

src/compontents/Redux_BorrowBooks.jsx（图书展示大屏与借书人的操作）

import React, {  Component } from 'react';
import store from "../store";
import "./Redux_BorrowBooks.css";
class Redux_BorrowBooks extends Component { 
    constructor(props) { 
        super(props);
        // 获取redux中存取的数据
        this.state = store.getState();
        // 追加state
        this.state.InputValue = "";
        // 只要store中的数据发生变化就执行subscribe中的方法
        store.subscribe(()=>{ 
            this.setState(store.getState());
        });
    }
    InputChange=(e)=>{ 
        this.setState({ 
            InputValue:e.target.value
        })
    }
    BorrowSucc=()=>{ 
        // 创建action
        const action = { 
            type:"BorrowSucc",
            value:this.state.InputValue
        }
        // 发送action
        store.dispatch(action);
    }
    InputSearch=()=>{ 
    	if(this.state.InputValue == ""){ 
            alert("请输入您要借阅的书籍");
        }
        if(this.state.NotBorrow.includes(this.state.InputValue)){ 
            alert("您借阅的图书存在，您已借阅成功");
            this.BorrowSucc();
        }else if(this.state.Borrowed.includes(this.state.InputValue)){ 
            alert("您借阅的图书已被借阅，请仔细查看未借阅书籍栏目");
        }else{ 
            alert("您借阅的图书暂无，请借阅其他书籍");
        }
        this.setState({ 
            InputValue:""
        })
    }
    render() { 
        const { NotBorrow,Borrowed,HistorySearcch,InputValue,status} = this.state;
        return (
            <div className="Redux_Borrow_Books">
                <div className="search">
                    <div className="search-content">
                        <input placeholder="请输入需要借阅的书籍名称" onChange={ this.InputChange} value={ InputValue}/>
                        <button onClick={ this.InputSearch}>查询</button>
                    </div>
                </div>
                <div className="not-borrow">
                    <p className="title">未借阅书籍</p>
                    <ul className="list">
                        { NotBorrow && NotBorrow.length>0 && NotBorrow.map((item,index)=>{ 
                            return(
                            <li key={ index}>{ index+1}.{ item}</li>
                            )
                        })}
                    </ul>
                </div>
                <div className="borrowed">
                    <p className="title">已借阅书籍</p>
                    <ul className="list">
                        { Borrowed && Borrowed.length>0 && Borrowed.map((item,index)=>{ 
                            return(
                            <li key={ index}>{ index+1}.{ item}</li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}
export default Redux_BorrowBooks;

src/compontents/Redux_BorrowBooks.css

ul { 
    list-style: none;
    padding: 0;
    margin: 0;
}
.Redux_Borrow_Books{ 
    padding: 20px;
}
.title{ 
    text-align: left;
    font-size: 16px;
    color: skyblue;
    margin: 0;
}
.list li{ 
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 20px;
}
.search-content{ 
    position: relative;
}
.search-content input{ 
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid skyblue;
    padding-left: 10px;
}
.search-content button{ 
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background: skyblue;
    border:none;
}
.hide{ 
    display: none;
}
.show{ 
    display: block;
}

目录结构图
Rudex的使用方法与总结插图1
最终效果图
Rudex的使用方法与总结插图2

原文链接：https://blog.csdn.net/weixin_39893889/article/details/104677856

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《Rudex的使用方法与总结》
　 　

还没有人抢沙发呢~