React+Antd+Redux實現待辦事件

以前也是寫過一篇關於Redux的文章，來簡單理解一下Redux,以及該如何使用。今天我就來分享一個也是入門級別的，React+Redux+antd來實現簡單的待辦事件。同時也講講本身對Redux的理解。先來看一張圖吧：

咱們簡單的比喻來讓咱們更加好的理解Redux，咱們這樣比喻(圖書館借書)：
1.React Component:借書人
2.Action Creators:你要說你要借書這句話，確定要說話吧，就是一句話：我要借書
3.Store:圖書館管理員
4.Reducer:圖書館管理員確定不可能記得全部書，那麼Reducer就是做爲一本小冊子，供圖書館管理員查

通俗理解：我要借書，我要先說話，告訴圖書館管理員我要借書，當圖書館管理員知道了以後，可是它不可能知道全部的書籍在哪裏，因此須要一本小冊子去找，最後找到了以後，再送到你手上。
專業術語理解：(Component)要借書，我要先說話(Action )，告訴圖書館管理員(Store)我要借書，當圖書館管理員知道了以後，可是它不可能知道全部的書籍在哪裏，因此須要一本小冊子(Reducer)去找，最後找到了以後，再送到你(Component)手上。

當你看圖以爲蒙的時候你再看看這個比喻是否是更好理解了？流程咱們大概清楚了，咱們就開始來看怎麼寫這個待辦事項吧。
咱們先來列一個提綱吧，屢清楚思路再寫代碼。
1.react component（todolist.js）
2.引入antd
3.寫store
4.寫reducer
5.寫action

大概就是上面的一些流程：

如何引入antd呢？

官方文檔：連接描述

文件目錄結構以下：

建立文件以前，首先建立圖書館管理員(store)，他不知道書具體在哪裏，因此再建立小冊子(redux)，給到圖書館管理員(store)：

//src/redux/index.js
import {createStore} from 'redux';
import reducer from './reducer'

const store=createStore(reducer);


export default store;

//src/redux/reducer.js
const defaultState={
    inputValue:'',
    list:[1,2]
}
export default(state=defaultState,action)=>{
    return state;
}

*註釋：剛開始state，這裏必定要給state賦一個初始值，纔不會報錯
接下來你就能夠，在todolist.js中用store.getState()獲取到store的值,我把他直接賦值給狀態:

我先實現一個由Component發送action,store收到action,在由reducer接受處理，最後返回一個新的狀態，Component接收顯示：

//src/redux/TodoList.js
import React from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List} from 'antd';
import store from './index';
export default class TodoList extends React.Component{
    constructor(props){
        super(props);
        this.state=store.getState();
    }
    componentDidMount(){
        console.log(this.state);
    }
    handleChg=(e)=>{
        const action={
            type:'change_input_value',
            inputValue:e.target.value
        }
        store.dispatch(action);
    }
    render(){ 
        console.log(this.state)   
        return(
            <div style={{marginTop:"10px",marginLeft:"20px"}}>
                <Input placeholder="請輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
                </div>
            </div>
        );
    }
    
}

思路：咱們經過input框中監聽內容變化發送action,reucer去處理

//src/redux/reducer.js
const defaultState={
    inputValue:'',
    list:[1,2]
}

export default(state=defaultState,action)=>{
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.inputValue;
        return newState;
    }
   
    return state;
}

你能夠打印出newState看一下，你就會發現inputValue就是你輸入的值了。
接下來的就能夠觸類旁通了。
完整代碼：

///src/redux/index.js
import {createStore} from 'redux';
import reducer from './reducer'

const store=createStore(reducer);

///src/redux/reducers.js
export default store;

const defaultState={
    inputValue:'',
    list:[1,2]
}

export default(state=defaultState,action)=>{
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.inputValue;
        return newState;
    }
    if(action.type==='send_message'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if(action.type==='delete_message'){
        const newState=Object.assign({},state);
        newState.list.splice(action.index,1);
        return newState;
    }
    return state;
}

///src/redux/todoList.js
import React from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List} from 'antd';
import store from './index';
const data=[
    1,2,3
];
export default class TodoList extends React.Component{
    constructor(props){
        super(props);
        this.state=store.getState();
        store.subscribe(this.F5)
    }
    componentDidMount(){
        console.log(this.state);
    }
    handleChg=(e)=>{
        const action={
            type:'change_input_value',
            inputValue:e.target.value
        }
        store.dispatch(action);
    }
    handleSend=()=>{
        const action={
            type:'send_message',
        }
        store.dispatch(action);
    }
    F5=()=>{
        this.setState(store.getState());
    }
    handleItem=(index)=>{
        const action={
            type:'delete_message',
            index:index
        }
        store.dispatch(action);
    }
    render(){ 
        console.log(this.state)   
        return(
            <div style={{marginTop:"10px",marginLeft:"20px"}}>
                <Input placeholder="請輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
                <Button type="primary" onClick={this.handleSend}>發送</Button>
                <div style={{width:"400px",marginTop:"10px"}}>
                <List
                     bordered
                     dataSource={this.state.list}
                     renderItem={(item,index) => (<List.Item onClick={this.handleItem.bind(this,index)}>{item}</List.Item>)}/>
                </div>
            </div>
        );
    }
    
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './redux/TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

這樣就實現了一個利用redux來實現簡單的待辦事項.相信你若是寫完這個demo以後，確定對Redux大體有了瞭解。若是本身在寫的過程當中有什麼疑惑，歡迎提出，我會給你解答。後期也會更新一些關於Redux的其餘方面的知識。