redux reducer_如何通过约定创建Redux reducer

redux reducer

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

“发现功能JavaScript”被BookAuthority评为最佳新功能编程书籍之一 ！

Redux is a very popular state management library. It simplifies the original Flux architecture by combining all stores and the dispatcher in a single store object.

Redux是一个非常流行的状态管理库。 通过将所有商店和调度程序组合在一个商店对象中，它简化了原始的Flux体系结构。

Redux promotes the use of functional programming for managing state. It introduces the reducer function concept.

Redux提倡使用功能编程来管理状态。 介绍了减速器功能的概念。

数据流 (Data flow)

Let’s look at the data flow inside the Redux store.

让我们看一下Redux存储内部的数据流。

An action is a plain object that contains all information necessary to do that action.

动作是一个普通对象，包含执行该动作所需的所有信息。

An action creator is a function that creates an action object.

动作创建者是创建动作对象的功能。

减速器 (Reducer)

A reducer is a pure function that takes state and action as parameters and returns the new state.

约简器是一个纯函数，它将状态和操作作为参数并返回新状态。

There may be many reducers managing parts of the root state. We can combine them together with combineReducers() utility function and create the root reducer.

可能存在许多化简器来管理部分根状态。 我们可以将它们与combineReducers()实用程序功能结合在一起，并创建根减速器。

Here is how the todos reducer may look like:

以下是todos减速器的外观：

import matchesProperty from "lodash/matchesProperty";
function todos(todos = [], action) {
 switch (action.type) {
  case "add_todo":
    const id = getMaxId(todos) + 1;
    const newTodo = { ...action.todo, id };
    return todos.concat([newTodo]);
  case "remove_todo":
    const index = todos.findIndex(matchesProperty("id",
                                  action.todo.id));
    return [...todos.slice(0, index), ...todos.slice(index + 1)];
  case "reset_todos":
    return action.todos;
  default:
    return state;
  }
}
export default todos;

The state in this case is the list of to-dos. We can apply to its actions like add_todo, remove_todo, reset_todos.

在这种情况下， state为待办事项清单。 我们可以将其应用于add_todo ， remove_todo ， reset_todos 。

按惯例减速机 (Reducer by convention)

I would like to get rid of the switch statement in the reducer. Functions should be small and do one thing.

我想摆脱reducer中的switch语句。 函数应该很小并且可以做一件事。

Let’s split the reducer into small pure functions with names matching the action types. I will call these setter functions. Each of them takes state and action as parameters and returns the new state.

让我们将化简器拆分为名称与操作类型匹配的纯函数。 我将这些设置程序称为函数。 它们每个都将状态和操作作为参数并返回新状态。

function remove_todo(todos, action) {
  const index = todos.findIndex(matchesProperty("id",
                                action.todo.id));
  return [...todos.slice(0, index), ...todos.slice(index + 1)];
}

function reset_todos(todos, action) {
  return action.todos;
}

function add_todo(todos, action) {
  const id = getMaxId(todos) + 1;
  const newTodo = { ...action.todo, id};
  return todos.concat([newTodo]);
}

还原动作 (redux-actions)

I would like to combine all these small functions together to create the original reducer function. We can use the handleActions() utility function from redux-actions for this.

我想将所有这些小的功能组合在一起以创建原始的reducer功能。 handleActions()我们可以使用redux-actions中的handleActions()实用程序函数。

import { handleActions } from "redux-actions";

const reducer = handleActions(
  { remove_todo, reset_todos, add_todo },
  []
);

export default reducer;

The setter functions will run by convention. When an action with type remove_todo comes in, the remove_todo() setter function will be executed.

设置器功能将按惯例运行。 当带有remove_todo类型的remove_todo进入时，将执行remove_todo() setter函数。

Here is the sample code on codesandbox.

这是codesandbox上的示例代码 。

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

发现功能JavaScript被称为 BookAuthority最好的新功能编程书籍 ！

For more on applying functional programming techniques in React take a look at Functional React.

有关在React中应用函数式编程技术的更多信息，请查看 Functional React 。

Learn functional React, in a project-based way, with Functional Architecture with React and Redux.

通过带有React和Redux的功能架构 ，以基于项目的方式学习功能性React 。

Follow on Twitter

在Twitter上关注

翻译自: https://www.freecodecamp.org/news/how-to-create-a-redux-reducer-by-convention-14f7e77bfc/

redux reducer