将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,我的组件可以使用减速机返回?
- 我的组件逻辑有多少可重用,或者我应该忘记它?什么是最好的方式去重复使用尽可能多的代码?
答
首先,您需要了解关于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:我在飞行中编写代码,所以可能不能正常工作,但应该稍作修改。