redux 状态容器进行删除和添加操作

前景

Redux是js应用的状态容器，可预测的状态管理。

在开发的过程中更加的稳定可预测的应用，运行在不同的环境中（客户端，服务器，原生应用），

易于测试

要使用Redux就要先安装：npm install redux 和 npm install  react-redux

首先理解这个“Redux”的东西是什么。它有什么作用？它帮助我解决什么问题？我为什么要使用它？

Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新

---

。

1.下面就是一些基础示例：

//index.js页面
//提前创建好store文件夹,然后里面新建两个文件 index.js,reducer.js
import {createStore} from 'redux'
import reducer from './reducer' 
const store =createStore(reducer)

export default store //抛出store

2.还有在公共的index.js里面引入store文件夹，

3.然后在引入 Provider标签将App标签进行包裹 ,把store文件夹写到Provider标签上

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './app.less';
//还有在公共的index.js里面引入store文件夹
//
import store from './store'
import {Provider} from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,

  document.getElementById('root')
);

4.然后呢在reducer.js页面 建立公共数据源 修改defauState里面的数据 。

// 公共数据源
const defauState = {
        inputValue:'',
        inputAge:'',
        
        list:[{age:12,name:'哈哈'}]
}

//修改defauState里面的数据
const reducer = (state = defauState,action) =>{
            console.log(action);
        
                
                 //名字   
              if(action.type==='inputName_value'){
                let newState=JSON.parse(JSON.stringify(state))
                newState.inputValue=action.value

                return newState
            }

            //年龄
            if(action.type==='inputAge_value'){
                let newSate=JSON.parse(JSON.stringify(state))
                newSate.inputAge=action.value

                return newSate
            }

                // 添加
             if(action.type==='add_value'){
                let newSate=JSON.parse(JSON.stringify(state))
                newSate.list.push(action.value)
                newSate.inputValue=''
                newSate.inputAge=''

                return newSate
            }

            // 删除
            if(action.type==='del_value'){
                let newSate=JSON.parse(JSON.stringify(state))
                newSate.list.splice(action.value,1)

                return newSate
            }


            
           return  state;
}


export default reducer

5.然后在App.js页面写页面进行渲染和事件操作处理结合

import React, { Component } from "react";
import {connect} from 'react-redux'
export class App extends Component {

   
    render() {
        return(
          <div>
              <p>
                搜索:  <input placeholder="搜索姓名"/>
              </p>
            <p>
              name:  <input placeholder="输入名字" value={this.props.inputValue} onChange={(e)=>this.props.onChangeValue(e)}/>
            </p>  
            <p> 
              age:  <input placeholder="输入年龄" value={this.props.inputAge} onChange={(e)=>this.props.onChangeAge(e)}/>
            </p>  
              <button onClick={()=>this.props.addFn({
                  name:this.props.inputValue,
                     age:this.props.inputAge,
              })}>添加</button>
              
              <table>
                    <tr>
                        <td>age</td>
                        <td>name</td>
                        <td>操作</td>
                    </tr>
                     {
                      this.props.list.map((v,i)=><tr key={i}>
                          <td>{v.age}</td>
                          <td>{v.name}</td>
                          <td><button onClick={()=>this.props.deletes(i)}>删除</button></td>
                      </tr>)
                  }
              </table>
                 
         </div>
        ) 
    }
}



const mapStateToProps=(state) =>{
        
        return{
            ...state
        }
}

const mapDispatchToProps=(dispatch)=>{

    return{
        //姓名输入事件
         onChangeValue(e) {
             let action={
                 type:'inputName_value',
                 value:e.target.value
             }

             dispatch(action)
       
    },
    
    //年龄输入事件
    onChangeAge(e){
        let action={
            type:'inputAge_value',
            value:e.target.value
        }
        dispatch(action)
      
      },

     //  添加 
        addFn(value){
            let action={
                type:'add_value',
                value
            }
             dispatch(action)
         
        },

        // 删除
        deletes(i){
            let action={
                type:'del_value',
                value:i
            }
            dispatch(action)
          
        }
    }
   
}

// mapStateToProps reducer里的属性 ，mapDispatchToProps reducer里面的方法
export default connect(mapStateToProps,mapDispatchToProps)(App);

最后

6.Redux是一个很有加载的管理状态工具，但是还是要考虑它是否适合你的场景。不要仅仅因为有人说过应该使用Redux而使用，所以也要多花些时间来了解它的潜在的好处。

也要多花些时间来学习它理解它。