将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应用程序

回答

相关问题