React架構（十三）Redux實作TodoList完整功能

項目使用Redux之前，加入了Antd圖形架構的使用——AntDesign的使用

即本次開發的起點

一.從“改變輸入框的值”看Redux的工作流程

需求分析：把輸入框中使用者輸入的内容實時顯示到輸入框中

下面是實作過程：

1.Reducer中設定預設資料：

=>預設資料
const defaultState={
    inputValue: '', // input框中的内容
    list: ['one', 'two'] // 清單中的每一項
};
export default (state=defaultState,action)=>{
	return state;
}
           

2.輸入框綁定函數：

<Input
	style={{width:'300px'}}
	id='insertArea'
	className="input"
	value={this.state.inputValue}
	placeholder={'todo info'}
	onChange={this.handleInputChange}
/>
           

3.在構造函數中綁定函數：

constructor(props) { // 接收一個參數（固定寫法）
        super(props); // 調用父類Component的構造函數，調用一次（js繼承）（固定寫法）
        this.state = store.getState();//利用該方法擷取預設資料

        //将this指向在初始化的時候就綁定好
        this.handleInputChange = this.handleInputChange.bind(this);
}
           

4.再看工作流程：

Action的作用：

• 告訴Redux我們要做什麼工作
• 将該工作傳遞給Store來處理

輸入框控制函數的實作：

handleInputChange(event) {
        //action對象建立
        const action = {
            type:'change_input_value', // type：告訴Redux要做的事情是什麼
            value:event.target.value // 傳遞現在的值
        };

        //把action傳遞給store
        store.dispatch(action);
    }
           

Store的作用：

• 把接收到的action和之前的state傳遞給Reducer，Redux會自動執行該過程
• 得到Reducer處理後的新state，替換原來的state
• 把新的state交給React元件重新渲染

5.修改Reducer檔案中的處理過程：

Reducer的作用：

• 結合之前的state和action告訴Store該做什麼，傳回新的state給store
• 限制：可以接收state，但不能進行修改！！！是以必須進行深拷貝

export default (state=defaultState,action)=>{
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state)); // 把之前的state進行深拷貝
        newState.inputValue=action.value;
        return newState; // 傳回新的state
    }
    return state;
}
           

經過Reducer處理後，新的state需要被重新渲染，其實就是更改state。在構造函數中對store綁定一個函數，隻要store發生改變，就可以自動執行subscribe中自定義的函數：

constructor(props) { 
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange=this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
           

handleStoreChange

函數的實作：

==>感覺到store變化後，修改state，包含所有store發生變化的情況
    handleStoreChange(){
        this.setState(store.getState());
    }
           

二.完成剩餘功能

同理，我們可以在元件上綁定多個onClick分别來實作不同的功能

如将輸入框的内容添加到清單中

1.先為按鈕綁定點選事件：

2.在構造函數中綁定this指向

constructor(props) { // 接收一個參數（固定寫法）
        super(props); // 調用父類Component的構造函數，調用一次（js繼承）（固定寫法）
        this.state = store.getState();//利用該方法擷取預設資料

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleStoreChange=this.handleStoreChange.bind(this);

        store.subscribe(this.handleStoreChange);
}
           

3.handleBtnClick函數的實作

handleBtnClick(e) {
        if (this.state.inputValue === '') {
            return;
        }
        //action對象建立
        const action = {
            type:'add_todo_item'
        };
        //把action傳遞給store
        store.dispatch(action);
    }
           

4. 在Reducer中增加處理過程

export default (state=defaultState,action)=>{
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state)); // 把之前的state進行深拷貝
        newState.inputValue=action.value;
        return newState; // 傳回新的state
    }

	if(action.type==='add_todo_item'){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    
    return state;
}
           

5.剩餘功能同理

使用Redux後的項目位址——Redux實作TodoList