The use of the story

Main entry: SRC Create store folder and create index.js

import { createStore } from "redux";
// Reference the repository of the list
import listRedux from "./listRedux";
// Put it in the main warehouse
const store = createStore(listRedux);

export default store;
Copy the code

The store folder creates listactiontypes.js

// Create the Action specification
// For hints

export const  CHANGE_INPUT_VALUE = 'change_input_value';
export const INPUT_SUBMIT = 'input_submit';
export const DELETE_ITEM = 'delete_item';

Copy the code

The store folder creates listactionActionfiline.js

// Operate the listRedux action set

// Reference the Action specification
// Operate the listRedux action set

// Reference the Action specification
import { CHANGE_INPUT_VALUE, INPUT_SUBMIT, DELETE_ITEM } from "./listActionTypes";
/** * The input value is assigned to the store inputValue *@method getInputChangeAction
 * @param The entered value */
export const getInputChangeAction = (value) = > ({
    type: CHANGE_INPUT_VALUE,
    value
});
/** * inputValue added to list *@method getInputSubmit
 * @param inputValue* /
export const getInputSubmit = (value) = > ({
    type: INPUT_SUBMIT,
    value
});
/** * delete item *@method listReduxDeleteItem
 * @param Index array subscript */
export const listReduxDeleteItem = (index) = > ({
    type: DELETE_ITEM,
    index
});

Copy the code

The store folder creates listredux.js

Because there's a lot of redux involved, make a simple distinction and avoid confusionCopy the code

Import {CHANGE_INPUT_VALUE, INPUT_SUBMIT, DELETE_ITEM} from "./listActionTypes"; import {CHANGE_INPUT_VALUE, INPUT_SUBMIT, DELETE_ITEM} from ". // Default values let defaultState = {inputValue: ", list: [' test 1', 'test 2']}; export default (state = defaultState, Parse (json.stringify (state)); // Input Modify value if(action.type === CHANGE_INPUT_VALUE){const newState = json.parse (json.stringify (state)); newState.inputValue = action.value; // Return newState; } // Input submit if(action.type === INPUT_SUBMIT){const newState = json.parse (json.stringify (state)); newState.list.push(action.value); newState.inputValue = ''; If (action.type === DELETE_ITEM){let newState = json.parse (json.stringify (state)); newState.list.splice(action.index, 1); return newState; } return state; }Copy the code

TodoList child: The Input component uses store

import React, { Component } from "react";
import { Input } from 'antd';
/ / store
import store from ".. /.. /.. /store";
/ / reference storeAction
import { getInputChangeAction } from ".. /.. /.. /store/listActionCreators";

class ListInput extends  Component{
   constructor(props) {
       super(props);
       // getState gets the store value
       this.state = store.getState();
       // subscribe listens to every change in the store
       store.subscribe(this.listenStoreChange)

   }
   / / to monitor
   listenStoreChange = () = >{
       this.setState(store.getState());
   };
   / / input input
   inputChange(event){
       / / redux operations
       const action = getInputChangeAction(event.target.value);
       / / send
       store.dispatch(action)
   };
   render() {
       let { inputValue } = this.state;
       return(
           <Input
               placeholder="Test"
               value={ inputValue }
               onChange={(event)= > this.inputChange(event)}
           />)}}export default  ListInput;

Copy the code

TodoList subcomponent: The Li component uses store

import React, { Component } from "react";
import store from ".. /.. /.. /store";
import  { listReduxDeleteItem } from '.. /.. /.. /store/listActionCreators';
class ListLi extends Component{
   liClick() {
       console.log(this.props.index);
       / / use the store
       let action = listReduxDeleteItem(this.props.index);
       / / send
       store.dispatch(action);
   };
   render() {
       const { item } = this.props;
       return(
           <li onClick={()= > this.liClick()}>
               {item}
           </li>)}}export default ListLi
Copy the code

TodoList parent: The List component uses store

import React, { Component } from "react";
import ListInput from "./components/ListInput";
import ListLi from './components/ListLi'
import { Card, Button, notification } from "antd";
import store from ".. /.. /store";
import { getInputSubmit } from ".. /.. /store/listActionCreators";


class Index extends Component{
   constructor(props) {
       super(props);
       this.state = store.getState();
       // subscribe listens to every change in the store
       store.subscribe(this.listenStoreChange)
   };
   / / hint
   openNotification = () = > {
       notification.open({
           message: 'tip'.description:
               'Input cannot be null oh ~'.onClick: () = > {
               console.log('Notification Clicked! '); }}); };/ / to monitor
   listenStoreChange = () = > {
       this.setState(store.getState());
   };
   / / add
   addItem = () = > {
       const { inputValue } = this.state;
       if(! inputValue){this.openNotification();
           return;
       }
       const action = getInputSubmit(inputValue);
       store.dispatch(action);
   };

   render() {
       let { list } = this.state;
       const listLi = list.map((item, index) = > {
           return (
               <ListLi key={index} item={item} index={index}  />)});const noLi = 'No more yet';
       return (
           <div style={{width: '100'}} % >
               <Card title='todo' style={{marginBottom: '30px'}} >
                   <h3>List2 Redux</h3>
                   <ListInput />
                   <Button type="primary" style={{marginTop: '20px'}} onClick={this.addItem}>add</Button>
               </Card>
               <Card title='list' style={{marginBottom: '30px'}} >
                   <ul>
                       {
                           list.length > 0 ? listLi : noLi
                       }
                   </ul>
               </Card>

           </div>)}}export  default  Index

Copy the code