将Redux添加到现有的React应用程序

Question

我一直在研究React应用程序,并且已经达到了我需要Redux来处理它的某些方面的地步.

在阅读了一堆教程后,我完全坚持如何让我的"更聪明"的组件"笨拙"并将功能转移到我的动作和减速器中.

因此,例如,应用程序的一个方面更多是待办事项列表样式.

我的一个课程开头是这样的:

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>在我的索引文件中添加一个Redux来添加Redux ,并创建了一个到目前为止相当空的基本reducers文件:

import { combineReducers } from 'redux';

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

};

// ... other irrelevant reducers

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

export default rootReducer;

...而且我已经创建了一个动作文件,其中也没有太多内容.

我一直在努力弄明白:

• 我看过的大多数动作只返回某种JSON,我在使用我的组件可以使用的JSON的reducer中返回什么？
• 我的组件逻辑有多少是可重用的,或者我应该忘记它？什么是最好的方法来重用尽可能多的代码？

Answer 1

首先,您需要了解redux如何与反应一起工作的整体情况.

在开始之前,首先要了解什么是智能组件和哑组件.

智能组件

1. 您需要在此处理所有代码逻辑
2. 它们也被称为容器.
3. 他们与商店(也称为州管理)进行交互以更新您的组件.

哑组件

1. 他们只是从容器中读取道具并渲染组件
2. 这只是UI视图,不应包含任何逻辑.
3. 所有造型/ html/css都有你愚蠢的组件.

这是一个了不起的一件物品,你可以去通过了解智能和哑组件,如果你还有疑问的.

好的,现在让我们试着了解redux的工作原理: -

• 您的智能组件(也称为容器)与您的redux商店进行交互
• 您从容器中触发操作.
• 你的行动叫你的apis
• 您的操作结果通过reducer更新商店
• 容器通过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
  }
}

现在,如果您已阅读redux文档,您会看到操作返回对象,那么我将如何调用我的api返回函数而不是对象.为此,我使用了redux thunk,你可以在这里阅读.

我举了一个例子,你可以拿到待办事项.如果您想执行其他操作,如deleteTodo,addTodo,modifyTodo,那么您可以在适当的组件中执行此操作.

1. DeleteTodo - 您可以在TodoListContainer中执行.
2. AddingTodo - 您可以在TodoListContainer中执行.
3. 更改状态(已完成/待定) - 您可以在TodoListContainer中执行.
4. ModifyingTodo - 你可以在TodoContainer中做.

你也可以在这里查看一个详细的例子,但在此之前我会说应该通过redux的基础知识你可以在这里找到

PS:我在运行中编写代码,因此它可能无法正常工作,但它应该只需稍加修改即可.