actionType

export const ADD_ITEM = 'addItem'
export const REMOVE_ITEM = 'removeItem'

actionCreator

import { ADD_ITEM, REMOVE_ITEM } from './actionTypes'

export const addUserItem = (data) => {
   return {
       type: ADD_ITEM,
       data
   }
}
export const removeUserItem = (index) => {
   return {
       type: REMOVE_ITEM,
       index
   }
}

reducer

import { ADD_ITEM, REMOVE_ITEM } from '../action/actionTypes'
const initState = [
    {
        name: '张三',
        age: 18
    },
    {
        name: '李四',
        age: 20
    },
    {
        name: '王五',
        age: 21
    },
    
]
export default (state = initState, action) => {
    switch (action.type) {
        case ADD_ITEM:
            return [
                ...state,
                action.data

            ]
        case REMOVE_ITEM:
            const newList = JSON.parse(JSON.stringify(state))
            newList.splice(action.index, 1)
            return newList
        default:
            return state
    }
}

store

import { createStore, applyMiddleware, compose } from 'redux';
import allReducers from './reducer'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(allReducers, composeEnhancers(
    applyMiddleware()
  ));
export default store

index.js

import React from 'react';
import {Provider} from 'react-redux'
import ReactDOM from 'react-dom';
import App from './App.jsx';
import store from './store'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

App.jsx

import React from 'react';
import {connect} from 'react-redux'
import {addUserItem, removeUserItem} from './store/action/actiosCreator'
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
          <ul>
            {this.props.list.map((item, index) => (
            <li style={{background: 'pink', marginTop: '10px'}} key={index} onClick={() => {this.props.storeRemove(index)}}>
              <span>{item.name}</span> ----------- <span>{item.age}</span>
            </li>
            ))}
            <button onClick={this.props.storeAdd}>添加</button>
          </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    list: state
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    storeAdd: () => {
      dispatch(addUserItem({name: '王麻子', age: 88}))
    },
    storeRemove: (index) => {
      dispatch(removeUserItem(index))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);