1）Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简单易学体积小在短时间内成为最热门的前端架构。
2）Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。
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"))
原文：https://www.cnblogs.com/xiaobu-wu/p/12157418.html