redux

Redux学习

　　一、什么是redux？

　　　　　　1）Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简单易学体积小在短时间内成为最热门的前端架构。

　　　　　　2）Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。

　　　　　　　  Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变

　　　　　　　  化了，一个新的对象就会被创建（使用actions和reducers）

　　二、用redux的好处

　　　　　　在应用中使用Redux有如下好处：

　　　　　　　　预测

　　　　　　　　　　始终有一个准确的数据源，就是store, 对于如何将actions以及应用的其他部分和当前的状态同步可以做到绝不混乱。

　　　　　　　　维护

　　　　　　　　　　具备可预测结果的性质和严格的组织结构让代码更容易维护。

　　　　　　　　组织

　　　　　　　　　　对代码应该如何组织更加严苛，这使代码更加一致，对团队协作更加容易。

　　　　　　　　测试

　　　　　　　　　　编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux的代码几乎全部都是这样的函数：短小、纯粹、分离。

　　　　　　　　服务端渲染

　　　　　　　　　　可以带来更好的用户体验并且有助于搜索引擎优化，尤其是对于首次渲染。仅仅是把服务端创建的store传递给客户端就可以。

　　　　　　　　开发者工具

　　　　　　　　　　开发者可以实时跟踪在应用中正在发生的一切，从actions到状态的改变。

　　　　　　　　社区与生态圈

　　　　　　　　　　存在很多支持Redux的社区，使它能够吸引更多的人来使用。

　　　三、如何使用？

　　　　　　　1、首先安装

　　　　　　　　

cnpm i  redux -S

　　　　　　　2、在src中创建一个store文件夹

　　　　　　　3、在store文件夹中创建一个index.js文件

　

import {createStore} from "redux";
import reducer from "./reducer";

export default createStore(reducer)

　　

　　　　　　　　3、在store文件夹中创建一个reducer.js文件

const defaultValue={
    inputValue:"",
    Listno:[],
    Listyes:[]
}

export default (state=defaultValue,action)=>{
    if(action.type==="input_value"){
        let newstate=state;
        let obj={
            "checked":false,
            "value":action.value
        }
        newstate.Listno.push(obj)
        return newstate;
    }
    if(action.type==="checked_change"){
        let newstate=state;
        let obj = newstate.Listno.splice(action.value,1)
        let obj2 = {
            "checked":true,
            "value":obj[0].value
        }
        newstate.Listyes.push(obj2)
        return newstate;
    }
    if(action.type==="checkedtwo_change"){
        let newstate=state;
        let obj = newstate.Listyes.splice(action.value,1)
        let obj2 = {
            "checked":false,
            "value":obj[0].value
        }
        newstate.Listno.push(obj2)
        return newstate;
    }
    if(action.type==="delete_listno"){
        let newstate=state;
        newstate.Listno.splice(action.value,1)
        return newstate;
    }
    if(action.type==="delete_listyes"){
        let newstate=state;
        newstate.Listyes.splice(action.value,1)
        return newstate;
    }
    if(action.type==="change_value"){
        let newstate=state;
        let obj={
            "checked":false,
            "value":action.value
        }
        newstate.Listno.splice(action.index,1,obj)
        return newstate;
    }
    return state;
}

　　

　　                      4、在List.js文件中引入store文件夹下的index.js文件

import React, { Component } from 'react';
import Store from "./store/index";
import "./List.css";

let flag=true;
export default class List extends Component {
    constructor(){
        super();
        this.state=Store.getState()
        Store.subscribe(()=>{
            this.setState(Store.getState())
        })
    }
    handlechangestate(index){
        const action={
            type:"checked_change",
            value:index
        }
        Store.dispatch(action)
    }
    handlechangetwostate(index){
        const action={
            type:"checkedtwo_change",
            value:index
        }
        Store.dispatch(action)
    }
    deleteone(index){
        const action={
            type:"delete_listno",
            value:index
        }
        Store.dispatch(action)
    }
    deletetwo(index){
        const action={
            type:"delete_listyes",
            value:index
        }
        Store.dispatch(action)
    }
    handleChangeValue(index,e){
        if(flag===true){
            e.target.contentEditable=true
            flag=false
        }else{
            e.target.contentEditable=false
            const action={
                type:"change_value",
                index:index,
                value:e.target.innerHTML
            }
            Store.dispatch(action)
            flag=true
        }   
    }
    render() {
        return (
            <div>
                <h3>未完成({this.state.Listno.length})</h3>
                <ul>
                    {this.state.Listno.map((m,i)=>{
                        return <li key={i}> <input type="checkbox" checked={m.checked?true:false} onClick={this.handlechangestate.bind(this,i)} /> <span title="双击可修改！" className="myspan" onDoubleClick={this.handleChangeValue.bind(this,i)}> {m.value} </span> <button onClick={this.deleteone.bind(this,i)}>删除</button> </li>
                    })}
                </ul>
                <h3>已完成 ({this.state.Listyes.length})</h3>
                <ul>
                    {this.state.Listyes.map((m,i)=>{
                        return <li key={i}  > <input type="checkbox" checked={m.checked?true:false} onClick={this.handlechangetwostate.bind(this,i)} /> {m.value} <button onClick={this.deletetwo.bind(this,i)}>删除</button> </li>
                    })}
                </ul>
            </div>
        )
    }
}

　　                                 5、创建一个Input.js文件

import React, { Component } from 'react';
import Store from "./store/index";

export default class Input extends Component {
    handleClick(){
        const action={
            type:"input_value",
            value:this.refs.myInput.value
        }
        this.refs.myInput.value=""
        Store.dispatch(action)
    }
    keyDown(e){
        if(e.keyCode===13){
            this.handleClick()
        }
    }

    render() {
        return (
            <div>
                <input type="text" ref="myInput"  onKeyDown={this.keyDown.bind(this)} /><button onClick={this.handleClick.bind(this)}>搜索</button>
            </div>
        )
    }
}

　　                                 6、创建一个App.js文件

　

import React, { Component } from 'react';
import Input from "./Input";
import List from "./List";

export default class App extends Component {
    render() {
        return (
            <div>
                <Input></Input>
                <List></List>
            </div>
        )
    }
}

　　                                   7、创建一个index.js文件返回一个组件元组向页面渲染

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

ReactDOM.render(<App />,document.querySelector("#root"))