React+redux Tutorial (iii) reduce (), filter (), map (), some (), every () 、... Expand Properties

Reduce (), filter (), map (), some (), every () 、... Expand properties These concepts belong to the syntax in ES5, ES6, and are not associated with react+redux, and we can search the relevant API documentation directly in https://developer.mozilla.org/en-US/.

But the official examples of Redux include the use of these grammars, which we can learn in the program. This is all by default using the ES6 notation.

Example

This is an example of the official Todomvc (HTTPS://GITHUB.COM/LEWIS617/MYREACT/TREE/MASTER/REDUX-EXAMPLES/TODOMVC):

Reduce ()

Iterates through an array, triggering a callback function after each element, and computes the return of an accumulated value.

Components/mainsection.js 62 Lines

const completedCount = todos.reduce((count, todo) =>
      todo.completed ? count + 1 : count,
      0
    )

Todos is the array, the first parameter of reduce () is an arrow syntax, which is a callback function, the first parameter of the callback function is the previous return value (but this is initialized to 0), and the second parameter is the value of the current element. The second parameter of reduce () is an initialization value (not required) that initializes the value of the previous element (this is count)

When traversing the first value of the array Todos, Count is 0,todo is the first item of the Todos, and the return value is one or the same. ( condition? result 1: Result 23-dollar operation)

When iterating over the second value of the array Todos, Count is the previous return value, and Todo is the second item of Todos, and the return value is one or the same.

......

At the end of the loop, you can get the number of the completed property in the array, which is the number of completed tasks.

Filter ()

Iterates through the array, triggering a callback function after each element, by judging, preserving or removing the current item, and finally returning a new array.

As the name implies is filtering.

Reducers/todos.js 24 Lines

 
return state.filter(todo =>
        todo.id !== action.id
      )

The state is a task array, and the filter () has only one parameter, which is an arrow function, which has only one parameter todo, that is, each element of the array, the judgment statement after the arrow, and if True retains the current item, and vice versa.

Some students will ask,todo.id!== action.id before why not return, this is the syntax of the arrow function, the arrows at both ends of the input and output, do not write return. If you use ES5 to:

 
return state.filter(function(todo) {
  return todo.id !== action.id
  }
)

The purpose of this snippet is to filter out tasks in the task array with the same ID as the specified ID. Returns a new array of tasks.

Map ()

Iterates through the array, triggers a callback function after each element, returns a new current item by calculation, and finally returns a new array.

Reducers/todos.js 29 Lines

 
return state.map(todo =>
        todo.id === action.id ?
          Object.assign({}, todo, { text: action.text }) :
          todo
      )

The value following the arrow is a ternary operator, which is a new element of return. If the IDs match, a new attribute is merged via object.assign(), which is to add or override a Text property to Todo, with the property value Action.text.

object.assign () The first parameter is target, the destination, the second third and subsequent parameters are source, that is, the source of the copy, is not much like the extend in the jquery plugin?

The purpose of this code is to update the Text property on the specified task in the array.

Some (), every ()

Iterates through the array, triggering a callback function after each element, and, by judgement, returns a Boolean value. Some () is as long as there is a satisfying judgment, the return True,every () is as long as there is an item that does not satisfy the judgment and returns false.

Components/mainsection.js 19 Lines

this. Props.todos.some (todo = todo.completed)

Iterates over the task array, and returns true if the property of a task is completed to true.

Reducers/todos.js 43 Lines

Const areallmarked = state.every (todo = todo.completed)

Returns True if the completed property of each task is true when iterating through the task array.

... Expand Properties

Reducers/todos.js 20 Lines

 
return [
        {
          id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
          completed: false,
          text: action.text
        }, 
        ...state
      ]

Expands each item of the state array to the current array

Components/mainsection.js 72 Lines

<todoitem key={todo.id} Todo={todo} {... actions}/>

Expand each property of the actions into the component, and finally the props can be obtained.

React+redux Tutorial (iii) reduce (), filter (), map (), some (), every () 、... Expand Properties