將Redux添加到現有的React應用程序

我一直在研究React應用程序，並且已經到了需要Redux處理某些方面的地步。將Redux添加到現有的React應用程序

在閱讀了大量教程之後，我相當堅持如何讓我的「智能」組件「笨拙」並將功能移到我的動作和縮減器中。

因此，例如，應用程序的一個方面是更多的待辦事項清單樣式。

我的一個類的開始是這樣的：

export default class ItemList extends React.Component { 
    constructor() { 
    super(); 
    this.state = { items: [], 
        completed: [], 
        }; 
    this.addItem = this.addItem.bind(this); 
    this.completeItem = this.completeItem.bind(this); 
    this.deleteItem = this.deleteItem.bind(this); 
    } 

    addItem(e) { 
    var i = this.state.items; 
    i.push({ 
     text: this._inputElement.value, 
     paused: false, 
     key: Date.now() 
    }); 
    this.setState({ items: i }); 
    e.preventDefault(); 
    this._inputElement.value = ''; 
    this._inputElement.focus(); 
    } 

    completeItem(e) { 
    this.deleteItem(e); 
    var c = this.state.completed; 
    c.push({ 
     text: e.target.parentNode.parentNode.getElementsByClassName('item-name')[0].innerHTML, 
     paused: false, 
     key: Date.now() 
    }); 
    this.setState({ completed: c }); 
    } 

    deleteItem(e) { 
    var i = this.state.items; 
    var result = i.filter(function(obj) { 
     return obj.text !== e.target.parentNode.parentNode.getElementsByClassName('item-name')[0].innerHTML; 
    }); 
    this.setState({ items: result }); 
    } 

    // ... more irrelevant code here ... 

    // there's a function called createTasks that renders individual items 

    render() { 
    var listItems = this.state.items.map(this.createTasks); 

    return <div className="item-list"> 
     <form className="form" onSubmit={this.addItem}> 
     <input ref={(a) => this._inputElement = a} 
       placeholder="Add new item" 
       autoFocus /> 
     <button type="submit"></button> 
     </form> 

     {listItems} 
    </div>; 
    } 
}

所以，你可以看到，這是非常邏輯沉重。我已經開始在我的索引文件中添加<Provider>加入終極版，並取得了基本的減速器文件是相當空至今：

import { combineReducers } from 'redux'; 

const itemList = (state = {}, action) => { 

}; 

// ... other irrelevant reducers 

const rootReducer = combineReducers({ 
    itemList, 
    // ... 
}); 

export default rootReducer;

...我已經做了一個行動的文件，不還有很多。

我一直在努力弄明白：我看到的只是返回某種JSON的例子

大多數操作，我該怎麼在使用該JSON，我的組件可以使用減速機返回？
我的組件邏輯有多少可重用，或者我應該忘記它？什麼是最好的方式去重複使用儘可能多的代碼？

來源

2017-04-13 Cassidy Williams

首先，您需要了解關於redux如何處理反應的整體情況。

在開始之前，先讓我們先了解什麼是智能組件和愚蠢組件。

智能零部件

你所有的代碼邏輯，這裏需要處理
他們也被稱爲容器。
他們與商店（又名狀態管理）進行交互以更新您的組件。

阿呆組件

他們只是從容器的讀取道具和渲染你的部件
這僅僅是用戶界面視圖，不應包含任何邏輯。
所有樣式/ html/css都在你的啞元組件中。

Here是一篇很棒的文章，如果您仍有疑問，您可以通過該文章瞭解智能和愚蠢組件。

好了，現在讓我們試着瞭解如何終極版作品： -

你的智能組件（也稱爲容器）與你的終極版商店
互動你火從容器的行爲。
你的行動打電話給你的API
你的行動的結果通過減速
您集裝箱通過mapStateToProps函數讀取的存儲和只要在儲值改變它更新組件更新的商店。

現在讓我們來考慮你的待辦事項例如

TodoListContainer.js

class TodoListContainer extends Component { 

    componentWillMount() { 
    // fire you action action 
    } 


    render() { 
    return (
     <Todos todos=={this.props.todos} /> 
    ) 
    } 
} 


function mapStateToProps(state) { 
    const {todos} = state; 
    return { 
    todos; 
    } 
} 

export default connect(mapStateToProps)(TodoListContainer)

TodoList.js

class TodoList extends Component { 

    renderTodos() { 
    return this.props.todos.map((todo)=>{ 
     return <Todo todo={todo} key={todo.id} /> 
    }) 
    } 

    render() { 
    return() { 
     if (this.props.todos.length === 0) { 
     return <div>No todos</div> 
     } 
     return (
     <div> 
      {this.renderTodos()} 
     </div> 
    ) 
    } 
    } 
} 

export default class TodoList

Todo.js

class Todo extends Component { 

    render() { 
    return (
     <div> 
     <span>{this.props.todo.id}</span> 
     <span>{this.props.todo.name}</span> 
     </div> 
    ) 
    } 
}

減速

export default function todos(state={},action) { 
    switch (action.type) { 
    case 'RECEIVE_TODOS': 
     return Object.assign(state,action.todos); 
    } 
}

行動

function fetchTodos() { 
    return(dispatch) => { 
     axios.get({ 
    //api details 
    }) 
    .then((res)=>{ 
     dispatch(receiveTodos(res.todos)) 
    }) 
    .catch((err)=>{ 
     console.warn(err) 
    }) 
    } 
} 

function receiveTodos(todos) { 
    return { 
    type: 'RECEIVE_TODOS', 
    todos 
    } 
}

現在，如果您已經閱讀終極版文檔，你會看到行動返回對象的話怎麼會我叫我的API有哪些返回一個函數而不是一個對象。爲此，我使用了你可以讀取here的減速箱。

我給了你一個例子，你可以獲取待辦事項。如果您想執行其他操作，如deleteTodo，addTodo，modifyTodo，那麼您可以在適當的組件中執行此操作。

DeleteTodo - 你可以在TodoListContainer中做。
AddingTodo - 您可以在TodoListContainer中完成。
更改狀態（完成/待定） - 您可以在TodoListContainer中完成。
ModifyingTodo - 您可以在TodoContainer中完成。

您還可以檢查出here進行了詳細的例子，但在此之前，我想說的只是應該通過終極版的基礎知識，你可以找到here

PS：我在飛行中編寫代碼，所以可能不能正常工作，但應該稍作修改。

來源

2017-04-13 01:05:04

將Redux添加到現有的React應用程序

回答

相關問題