如何在带有redux的reactjs中的todo列表中创建编辑和更新用户功能

Question

我想知道如何在此文件中创建编辑和更新功能。 我创建了一个User.js组件，在其中使用了常规的react-bootsrap，并在单击时创建了添加用户名和电子邮件的方法，然后还创建了delete函数，以在action和reducer的帮助下删除用户名和电子邮件。
请让我知道是否有解决办法

这是我的主要容器组件，我们可以在其中添加和删除用户。

User.js

import React, {Component} from 'react';
import { Modal, Button, FormControl, Col, FormGroup, Row ,PageHeader,Grid} from 'react-bootstrap';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import Header from '../../components/Header.js';
import {addUser,deleteUser,editUser} from '../../actions/userActions';

class Users extends Component{
	constructor(props) {
    super(props);
    this.state = {
      object_todo:{
      yourName: '',
      yourEmail: '',
      },
      show: false,
    };
    
  }
  
    inputChanged =(key,e) =>{
    	e.preventDefault();
    	let {object_todo} = this.state;
    	object_todo[key] = e.target.value;
    	this.setState({
			object_todo
		})
    }

  addTodo = (e,id) => {
    e.preventDefault();
    let {object_todo} = this.state;
    let data = {yourName: object_todo.yourName, yourEmail: object_todo.yourEmail}
    console.log(data,'add')
    localStorage.setItem('list', JSON.stringify(data));
	  this.props.dispatch(addUser(data));
    this.handleHide()
  }
  handleHide() {
    this.setState({ show: false });
  }

    handleDelete(id){
    let {object_todo} = this.state;
    let data = {yourName: object_todo.yourName, yourEmail: object_todo.yourEmail}
    console.log(data,'delete')
    localStorage.setItem('list', JSON.stringify(data));
	  this.props.dispatch(deleteUser(data,id));
    }
    componentWillMount(){
      console.log(this.props.userReducer.details)
    	let getList = localStorage.getItem('list');
       getList = JSON.parse(getList);
        if(getList){
          this.props.userReducer.details = getList
      }
    }
     edit(id){
      this.setState({show:true})
      this.setState({isEdit:true})
      

      }

		render() {
		//console.log(addUser,deleteUser)
		console.log(this.props.userReducer);
    console.log(this.props.userReducer.details);


    return (
      <div>
      		<Header />
          <div className="container">
          	<div className="btn btn-default pull-right" onClick={() => this.setState({ show: true })} >Add Users</div>
        			<table border="1">
            		<tbody>
                	<tr>
                		<th style={{padding:'10px'}}>Name</th>
                		<th style={{padding:'10px'}}>Email</th>
                		<th style={{padding:'10px'}}>Delete</th>
                    <th style={{padding:'10px'}}>Delete</th>
                	</tr>
                  	{this.props.userReducer.details && this.props.userReducer.details.map((item, index) =>
                    <tr key={index}>
                    	<td style={{padding:'10px'}}>{item.yourName}</td>
                    	<td style={{padding:'10px'}}>{item.yourEmail}</td>
                    	<td style={{padding:'10px'}}><Button onClick={this.handleDelete.bind(this,index)}>delete</Button></td>
                      <td style={{padding:'10px'}}><Button onClick={this.edit.bind(this)}>edit</Button></td>
                    </tr>)}
            		</tbody>
          		</table>
	          	<Modal
	          		show={this.state.show}
	          		onHide={this.handleHide.bind(this)}
	          		container={this}
	          		aria-labelledby="contained-modal-title">
	          			<Modal.Header closeButton>
	            			<Modal.Title id="contained-modal-title">
	              			User Details
	           				 </Modal.Title>
	          				</Modal.Header>
	          			<Modal.Body>
	                 <form onSubmit={this.addTodo.bind(this)}>
	            			<FormControl
	            				type="text"
	            				onChange={this.inputChanged.bind(this,'yourName')}
	            				value={this.state.yourName} placeholder="name"
	            			/><br />
	            			<FormControl
	            				type="text"
	            				onChange={this.inputChanged.bind(this,'yourEmail')}
	            				value={this.state.yourEmail} placeholder="email"
	            			/><br />
	            			<FormControl  type="submit" value="add"/>
	          				</form>
	         			 	</Modal.Body>
	          			<Modal.Footer>
	            			<Button onClick={this.handleHide.bind(this)}>Close</Button>
	          			</Modal.Footer>
	        		</Modal>
         		</div>
        </div>
    );
  }
}
export default
 connect(
   state => (
     {
      userReducer: state.userReducer 
     },
     mapDispatch
   )
 )(Users)
const mapDispatch = dispatch => {
 const allActionProps = Object.assign({}, dispatch)
 return allActionProps
}

动作如下所示：-

userAction.js

import * as types from './types.js';
import store from '../store';
let {getState} = store;
export const addUser = (userData) => {
	console.log(userData, 'test')
	let userList = getState().userReducer.details;
	console.log(getState().userReducer.details,'ajay')
	userList.push(userData)
	console.log(userList)
	localStorage.setItem('list', JSON.stringify(userList));
	 return dispatch => {
	 	dispatch({
	 		type: types.ADD_USER,
	 		payload: userList
	 	})
	 }
}
export const deleteUser = (userData,id) => {
	console.log(id)
	let userList =getState().userReducer.details;
	console.log(userList,'list')
	userList.slice();
	console.log(userList,'slice')
	userList.splice(id,1)
	localStorage.setItem('list', JSON.stringify(userList));
	return dispatch => {
		dispatch({
			type: types.REMOVE_USER,
			payload: userList
		})
	}
}

我的Reducer文件如下所示：-

userReducer.js

import * as types from '../actions/types.js';
const initState ={
	details:[]
}

export function userReducer(state = initState, action) {
	switch(action.type) {
		case types.ADD_USER:
		return Object.assign({}, state, { details: action.payload});
		break;
		case types.REMOVE_USER:
		return Object.assign({}, state, { details: action.payload});
		case types.EDIT_USER:
		return Object.assign({}, state, { details: action.payload});
		default:
		return state;
    }
}