1、redux是什么？9
Redux就是React的状态管理工具
2、安装Redux:
cnpm install -S redux
3、创建Store
我们在src下建一个store文件，里面有index，和reducer
下面我们创建store
//数据（可以是ajax请求的）
const defaultStaet = {
//input的value
inputValue: '',
//未完成的
listW: [],
//已完成的
listY: []
}
//导出
export default (state = defaultStaet, action) => {
return state
}
store文件夹下面的index里引入reducer
import { createStore } from 'redux';
import reducer from './reducer';
export default createStore(reducer)
整体代码
List组件
import React, { Component } from 'react'
//子组件Input
import Input from './Input';
//store
import store from './store/index';
export default class List extends Component {
constructor() {
super()
//获取store里的数据
this.state = store.getState()
//监听store，实时改变state数据
store.subscribe(() => {
this.setState(store.getState())
})
}
//inputvalue的值
myInputValue(e) {
const action = {
type: 'input-value',
value: e.target.value
}
//每输入传给store
store.dispatch(action)
}
//点击button按钮
myButtonClick() {
//获取输入框传给store里inputValue的值
const action = {
type: 'button-value',
value: this.state.inputValue
}
//把值传给store
store.dispatch(action)
}
//绑定键盘事件
myKeyDown(e) {
//判断是否摁下的是enter
if (e.keyCode === 13) {
//调用添加事件
this.myButtonClick()
}
}
//checkbox点击事件
myCheckedChange(i, e) {
if (e.target.checked) {
//splice切割出来当前点击的
let arr = this.state.listW.splice(i, 1)[0]
//checked取反值
arr.checked = !arr.checked
const action = {
type: 'checked-listW',
value: arr
}
//把更改以后的数组传给store
store.dispatch(action)
} else {
//splice切割出来当前点击的
let arr = this.state.listY.splice(i, 1)[0]
//checked取反值
arr.checked = !arr.checked
const action = {
type: 'checked-listY',
value: arr
}
//把更改以后的数组传给store
store.dispatch(action)
}
}
//删除按钮（未完成的）
myButtonDeleteW(i) {
//把当前点击的splice切割出来
this.state.listW.splice(i, 1)
const action = {
type: 'listW-delete',
value: this.state.listW
}
//把切割以后的数传给store
store.dispatch(action)
}
//删除按钮（已完成的）
myButtonDeleteY(i) {
//把当前点击的splice切割出来
this.state.listY.splice(i, 1)
const action = {
type: 'listY-delete',
value: this.state.listY
}
//把切割以后的数传给store
store.dispatch(action)
}
//点击内容改为可编辑状态
myItemUpdate(e) {
e.target.contentEditable = true
}
//数去焦点
myItemBlur(i, e) {
//把当前修改的数据的内容重新修改
this.state.listW.splice(i, 1, { 'value': e.target.innerHTML, 'checked': false })
const action = {
type: 'item-update',
value: this.state.listW
}
//改为不可编辑状态
e.target.contentEditable = false
//把修改后新的数组传给store
store.dispatch(action)
}
render() {
return (
<React.Fragment>
{/* 使用input */}
{/* 把父组件方法myKeyDown传给子组件 */}
{/* 把父组件方法myButtonClick传给子组件 */}
{/* 把父组件里的this.state.inputValue传给子组件 */}
{/* 把父组件方法myInputValue传给子组件 */}
<Input myKeyDown={this.myKeyDown.bind(this)} myButtonClick={this.myButtonClick.bind(this)} value={this.state.inputValue} myInputValue={this.myInputValue.bind(this)} />
{
<ul>
<h3>正在进行 ({this.state.listW.length})</h3>
{/* 遍历正在进行的 */}
{this.state.listW.map((item, index) => {
return <li key={index}>
<input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
<span onClick={this.myItemUpdate.bind(this)} onBlur={this.myItemBlur.bind(this, index)}>{item.value}</span>
<button onClick={this.myButtonDeleteW.bind(this, index)}>删除</button>
</li>
})}
</ul>
}
{
<ul>
<h3>已完成 ({this.state.listY.length})</h3>
{/* 遍历已完成的 */}
{this.state.listY.map((item, index) => {
return <li key={index}>
<input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
<span>{item.value}</span>
<button onClick={this.myButtonDeleteY.bind(this, index)}>删除</button>
</li>
})}
</ul>
}
</React.Fragment>
)
}
}
Input组件
import React, { Component } from 'react'
export default class Input extends Component {
render() {
return (
<div>
{/* value：实时更新value */}
{/* onKeyDown键盘事件 */}
{/* onChange实时监听input的value */}
<input type="text" value={this.props.value} onKeyDown={this.props.myKeyDown} onChange={this.props.myInputValue} />
{/* 点击添加事件 */}
<button onClick={this.props.myButtonClick}>添加</button>
</div>
)
}
}
reducer
//数据（可以是ajax请求的）
const defaultStaet = {
//input的value
inputValue: '',
//未完成的
listW: [],
//已完成的
listY: []
}
//导出
export default (state = defaultStaet, action) => {
//input框输入的值
if (action.type === 'input-value') {
const newState = state
//赋值给newState.inputValue
newState.inputValue = action.value
return newState
}
//点击button提交的内容
if (action.type === 'button-value') {
const newState = state
//把input框的值以键值对push到，listWli。实现添加
newState.listW.push({ 'value': action.value, 'checked': false })
return newState
}
//点击checked，
if (action.type === 'checked-listW') {
const newState = state
// 把当前点击的push到listYli，实现未完成的拿出来放到已完成里
newState.listY.push(action.value)
return newState
}
//点击checked
if (action.type === 'checked-listY') {
const newState = state
// 把当前点击的push到listWli，实现已完成的拿出来放到未完成里
newState.listW.push(action.value)
return newState
}
//点击删除
if (action.type === 'listW-delete') {
const newState = state
//把删除以后新的数组赋值给listW
newState.listW = action.value
return newState
}
//点击删除
if (action.type === 'listY-delete') {
const newState = state
//把删除以后新的数组赋值给listY
newState.listY = action.value
return newState
}
//点击更新内容
if (action.type === 'item-update') {
const newState = state
//把更改以后新的数组赋值给listW
newState.listW = action.value
return newState
}
return state
}