redux小案例

使用redux管理数据状态
首先使用npm install --save redux
在命令行中将redux进行安装

新建一个文件store.js，作为仓库进行数据的分发
store.js

import {createStore} from 'redux'
//导入reduce.js文件
import reducer from 'reducer.js'
const store=createStroe(reducer)
//可以查看此时store数据
//导出store
export default store

同时再创建一个reducer.js文件，用于写处理数据的逻辑

//默认值
const defaultValue={
}
export default (state=defaultValue,action)=>{
if(action.type==''){
//如果发生变化，要将state进行拷贝，因为reducer只能接收state，不能改变state
let newState=JSON.parse(JSON.stringify(state))
return newState
}
//对state数据的逻辑处理，处理完成之后将state进行返回
return state

在jsx组件里面引入store.js
index.jsx文件里面

import store from 'store.js'
class TodoList extends Component{
componentWillMount(){
//如果我们想要改变state中的数据实现双向数据的变化，在组件文件中我们使用发布订阅者模式
store.subscribe(this.storeChange) //当store中数据发生变化，就会触发该函数
//此时获得store中的数据
	console.log(store.getState())
}
storeChange=（）=>{
	this.setState(store.getState())
}
render(){
	return(
	)
}
}

下面是一个经典案例todoList，在这个案例里面实现了数据的增加，删除，
组件页面 todoList.jsx

import React ,{Component} from 'react'
import { InputItem ,Button } from 'antd-mobile';
import './todolist.less'
import store from './store';
class TodoList extends Component{
   constructor(props){
       super(props)
        store.subscribe(this.storeChange)
   }
   state={
       inputValue:'',
       data:[]
   }
   componentDidMount(){
    const {inputValue,data}=store.getState()
    this.setState({
        inputValue,
        data
    })
    
   }
   storeChange=()=>{
       this.setState(store.getState())
   }
    renderItem=()=>{
     return   this.state.data.map(item=>{
        return <h4 onClick={()=>this.deleteItem(item.id)}>{item.content}</h4>
        })
        
      
    }
    changeInput=(e)=>{
        const action={
            type:'changeInput',
            value:e
        }
        store.dispatch(action)
    }
    addItem=()=>{
        const action={
            type:'ADDITEM'
        }
        store.dispatch(action)
    }
    deleteItem=(id)=>{
        const action={
            type:'DELETEITEM',
            id:id
        }
        store.dispatch(action)
    }
    render(){
        return(
            <div>
                <div style={{display:'flex',marginTop:'10px'}}>
                    <InputItem  placeholder="Write Someting"
                    onChange={this.changeInput}
                    value={this.state.inputValue}
                    />
                    <Button type="primary" style={{width:"50px",marginLeft:'10px'}} onClick={this.addItem}>增加</Button>
                </div>
                {this.renderItem()}
            </div>
        )
    }
}
export default TodoList

index.js页面，是创建仓库store

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

reducer.js 页面，进行state数据的逻辑处理，然后将新的state返回

const defaultState={
    inputValue:'',
    data:[
        {
            id:1,
            content:'这是一个帅哥'
        },
        {
            id:2,
            content:'这是一个小哥哥'
        },
        {
            id:3,
            content:'这是一个小姐姐'
        }
    ]
}
export default (state=defaultState,action)=>{
    // reducer只能接收state，不能改变state
    if(action.type==='changeInput'){
        let newState=JSON.parse(JSON.stringify(state)) //深度拷贝
        newState.inputValue=action.value
        
        return newState
    }
    if(action.type==='ADDITEM'){
        let newState=JSON.parse(JSON.stringify(state))
        let obj={
            id:newState.data.length+1,
            content: newState.inputValue
        }
        newState.data.push(obj)
        newState.inputValue=''
        return newState
    }
    if(action.type==='DELETEITEM'){
        let newState=JSON.parse(JSON.stringify(state))
        let index=newState.data.findIndex(item=>{
            return item.id===action.id
        })
        newState.data.splice(index,1)
        return newState
    }
    return state
}