Redux管理状态-todoList实现
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 }
