Selector\u95a2\u6570\u3092\u30e1\u30e2\u5316\u3059\u308b\u306e\u3067\u3001\u4e0d\u8981\u306aSelector\u95a2\u6570\u306e\u518d\u8a08\u7b97\u3092\u9632\u3050\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u307e\u305f\u3001reselect\u306f\u3001\u5165\u529b\u5024\u306b\u57fa\u3065\u3044\u3066\u30e1\u30e2\u5316\u3055\u308c\u305fSelector \u95a2\u6570\uff08outputSelector\uff09\u3092\u751f\u6210\u3059\u308bcreateSelector API\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u4f7f\u7528\u65b9\u6cd5\u306f\u3001\u30e1\u30e2\u5316\u3055\u308c\u305fSelector\u95a2\u6570\u3092\u751f\u6210\u3059\u308b createSelector \u3092 component \u306b import \u3059\u308b\u3053\u3068\u3067\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
createSelector\u306f\u3001\u5165\u529b\u30bb\u30ec\u30af\u30bf\uff08inputSelector\uff09\u3068\u7d50\u679c\u95a2\u6570\uff08resultFunc\uff09\u3092\u53d7\u3051\u53d6\u308a\u3001\u62bd\u51fa\u3055\u308c\u305f\u5024\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u306e\u307f\u51fa\u529b\u3092\u518d\u8a08\u7b97\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/p>\n\n\n\n
const outputSelector = createSelector(\n [inputSelector1, inputSelector2, inputSelector3], \/\/ synonymous with `dependencies`.\n resultFunc \/\/ Result function\n)<\/code><\/pre><\/div>\n\n\n\n\u4f7f\u7528\u4f8b\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3067\u3059\u3002\uff08\u307b\u307c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u629c\u7c8b\u3057\u305f\u3082\u306e\uff09<\/p>\n\n\n\n
import React from 'react';\nimport { createSelector } from 'reselect';\n\nconst ReselectExample = () => {\n const state = {\n todos: [\n { id: 0, completed: false },\n { id: 1, completed: true }\n ],\n alerts: [\n { id: 0, read: false },\n { id: 1, read: true }\n ]\n };\n\n const selectCompletedTodos = (state) => {\n console.log('selector ran');\n return state.todos.filter(todo => todo.completed === true);\n };\n\n selectCompletedTodos(state); \/\/ selector ran\n selectCompletedTodos(state); \/\/ selector ran\n selectCompletedTodos(state); \/\/ selector ran\n\n const memoizedSelectCompletedTodos = createSelector(\n [(state) => state.todos],\n (todos) => {\n console.log('memoized selector ran');\n return todos.filter(todo => todo.completed === true);\n }\n );\n\n memoizedSelectCompletedTodos(state); \/\/ memoized selector ran\n memoizedSelectCompletedTodos(state);\n memoizedSelectCompletedTodos(state);\n\n console.log(selectCompletedTodos(state) === selectCompletedTodos(state)); \/\/=> false\n\n console.log(\n memoizedSelectCompletedTodos(state) === memoizedSelectCompletedTodos(state)\n );\n\n return (\n <>\n <\/>\n );\n};\n\nexport default ReselectExample;\n<\/code><\/pre><\/div>\n\n\n\n\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30da\u3057\u3001google dev tools \u306e console \u3067\u78ba\u8a8d\u3057\u3066\u3044\u305f\u3060\u304f\u3068\u3001memoizedSelectCompletedTodos\u306f 2\u5ea6\u76ee\u30013\u5ea6\u76ee\u306f\u5b9f\u884c\u3055\u308c\u305a\u3001\u524d\u56de\u3068\u540c\u3058\u623b\u308a\u5024\u3092\u8fd4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u306e\u3088\u3046\u306b\u3001\u4e0d\u8981\u306a\u518d\u8a08\u7b97\u3092\u30b9\u30ad\u30c3\u30d7\uff08\u30e1\u30e2\u5316\uff09\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001memoizedSelectCompletedTodos \u306f\u3001\u518d\u8a08\u7b97\u304c\u306a\u3051\u308c\u3070\u524d\u56de\u30ad\u30e3\u30c3\u30b7\u30e5\u3055\u308c\u305f\u7d50\u679c\u306e\u5024\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
![\"\"](\"https:\/\/blog.fundely.co.jp\/tech\/wp-content\/uploads\/sites\/2\/2024\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-06-22-18.02.41-1024x441.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.fundely.co.jp\/tech\/wp-content\/uploads\/sites\/2\/2024\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2024-06-22-18.04.43-1024x482.png\")
<\/figure>\n\n\n\n