1.首先先封裝action中的type ~~~ //src=>store=>actionType.js // 集中管理action中的type，方便調試 const inputChange="inputChange"; const addItem="addItem"; const deleteItem="deleteItem"; export{inputChange,addItem,deleteItem}; ~~~ 2.封裝action ~~~ //src=>store=>actionCreators.js // 直接將action進行封裝使用 import {inputChange,addItem,deleteItem} from "./actionType.js"; const valueChangeAction=(value)=>{ return { type:inputChange, value } } const valueaddItemAction=(value)=>{ return { type:addItem, value } } const valuedeleteItemAction=(index)=>{ return { type:deleteItem, index } } export{valueChangeAction,valueaddItemAction,valuedeleteItemAction} ~~~ 3.使用 ~~~ //app.js import React, { Component } from 'react'; import store from '../store/index.js'; // import {inputChange,addItem,deleteItem} from "../store/actionType.js" //導入的type import {valueChangeAction,valueaddItemAction,valuedeleteItemAction} from "../store/actionCreators" //導入的是action class App extends Component { //動態顯示時數據 構造器 constructor(props) { super(props); console.log(store.getState()) this.state = store.getState(); // 只要store的狀態改變就會觸發(要通過事件獲取reducer中的數據,多個數據時也只使用一個) store.subscribe(this.handleStoreChange) } // 固定格式返回一個html1 render() { return ( <div> <input value={this.state.inputValue} onChange={this.handleChange}/> <button onClick={this.handleAdd}>添加</button> <div> {this.state.list.map((value,index)=>{ return( <div onClick={()=>{this.handleDelete(index)}} key={index}> {value} </div> ) })} </div> </div> ); } handleChange = (e) => { // const action ={ // type:inputChange, // value:e.target.value // } store.dispatch(valueChangeAction(e.target.value)); } handleStoreChange=()=> { this.setState(store.getState()) } handleAdd=()=>{ // const action ={ // type:addItem, // value:this.state.inputValue // } store.dispatch(valueaddItemAction(this.state.inputValue)); } handleDelete=(index)=>{ // const action ={ // type:deleteItem, // index // } store.dispatch(valuedeleteItemAction(index)); } }; export default App; ~~~