app.js ~~~ import React, { Component } from 'react'; import store from '../store/index.js'; 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(action); } handleStoreChange=()=> { this.setState(store.getState()) } handleAdd=()=>{ const action ={ type:'addItem', value:this.state.inputValue } store.dispatch(action); } handleDelete=(index)=>{ const action ={ type:'deleteItem', index } store.dispatch(action); } }; export default App; ~~~ src>store>reducer.js ~~~ // 相當于倉庫 const defaultState={ inputValue:'hello world', list:[] }; /* state指store中的數據 */ export default (state=defaultState,action)=>{ console.log(action); if(action.type==='inputChange'){ //解構復制一份 let newState = {...state} newState.inputValue = action.value; return newState; } if(action.type==='addItem'){ //解構復制一份 let newState = {...state} newState.list.push(action.value); return newState; } if(action.type==='deleteItem'){ let newState = {...state} newState.list.splice(action.index,1); return newState; } return state; } ~~~ src>store>index.js ~~~ import {createStore} from 'redux'; import reducer from './reducer'; const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); export default store; ~~~