![\"Screenshot](\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-12-23-43-11.png\")
<\/a><\/p>\nRedux\u306ereducer\u3092\u5b9a\u7fa9<\/h4>\n
\u3053\u3053\u304b\u3089\u306f\u3000redux\u306e\u57fa\u790e\u77e5\u8b58\u304c\u3042\u308b\u524d\u63d0\u3067\u66f8\u304d\u9032\u3081\u307e\u3059\u3002
\n\u30c4\u30e9\u30a4\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u5199\u7d4c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
[bash]
\n$ nano reducers\/root.js
\n[\/bash]<\/p>\n
[bash]
\nimport {combineReducers} from “redux”;<\/p>\n
import product from “.\/Product\/product”;<\/p>\n
const rootReducer = combineReducers({
\n product: product,
\n})<\/p>\n
export default rootReducer;<\/p>\n
[\/bash]<\/p>\n
[bash]
\n$ mkdir reducers\/Product
\n$ nano reducers\/Product\/product.js
\n[\/bash]<\/p>\n
[bash]
\nimport {combineReducers} from “redux”<\/p>\n
import list_body from “.\/list_body”;
\nimport mode from “.\/mode”;
\nimport product_info from “.\/product_info”;<\/p>\n
const product = combineReducers({
\n list_body: list_body,
\n mode: mode,
\n product_info: product_info,
\n})<\/p>\n
export default product;<\/p>\n
[\/bash]<\/p>\n
[bash]
\n$ nano reducers\/Product\/list_body.js
\n[\/bash]<\/p>\n
[bash]
\nimport {PRODUCT_SET_LIST_BODY} from “..\/..\/constants\/index”<\/p>\n
const list_body = (state=[], action) => {
\n switch (action.type) {
\n case PRODUCT_SET_LIST_BODY:
\n let newState = [];
\n for (let i = 0 ; i < action.list_body.length; i++){\n let copy = Object.assign({}, action.list_body[i]);\n newState.push(copy);\n }\n\n return newState\n\n default:\n return state\n }\n}\n\nexport default list_body\n\n[\/bash]\n\n\n[bash]\n$ nano reducers\/Product\/mode.js\n[\/bash]\n\n[bash]\nimport {PRODUCT_SET_MODE} from \"..\/..\/constants\/index\"\n\nconst mode = (state=\"ADD\", action) => {
\n switch (action.type) {
\n case PRODUCT_SET_MODE:
\n return action.mode
\n default:
\n return state
\n }
\n}<\/p>\n
export default mode<\/p>\n
[\/bash]<\/p>\n
[bash]
\n$ nano reducers\/Product\/product_info.js
\n[\/bash]<\/p>\n
[bash]
\nimport {PRODUCT_SET_PRODUCT_INFO} from “..\/..\/constants\/index”<\/p>\n
const product_info = (state=null, action) => {
\n switch (action.type) {
\n case PRODUCT_SET_PRODUCT_INFO:
\n let copy = Object.assign({}, action.product_info)
\n return copy<\/p>\n
default:
\n return state
\n }
\n}<\/p>\n
export default product_info<\/p>\n
[\/bash]<\/p>\n
[bash]
\n$ nano reducers\/Product\/has_more.js
\n[\/bash]<\/p>\n
[bash]
\nimport {PRODUCT_SET_HAS_MORE} from “..\/..\/constants\/index”<\/p>\n
const has_more = (state=false, action) => {
\n switch (action.type) {
\n case PRODUCT_SET_HAS_MORE:
\n return action.has_more
\n default:
\n return state
\n }
\n}<\/p>\n
export default has_more<\/p>\n
[\/bash]<\/p>\n
Redux reducer\u3067\u4f7f\u3063\u305f\u5b9a\u6570\u3092\u5b9a\u7fa9<\/h4>\n
\u5b9a\u6570\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
[bash]
\n$ nano constants\/index.js
\n[\/bash]<\/p>\n
[bash]
\nexport const PRODUCT_SET_LIST_BODY = “PRODUCT_SET_LIST_BODY”;
\nexport const PRODUCT_SET_MODE = “PRODUCT_SET_MODE”;
\nexport const PRODUCT_SET_PRODUCT_INFO = “PRODUCT_SET_PRODUCT_INFO”;
\nexport const PRODUCT_SET_HAS_MORE = “PRODUCT_SET_HAS_MORE”;<\/p>\n
[\/bash]<\/p>\n
Redux\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9<\/h4>\n
\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
[bash]
\n$ nano actions\/product.js
\n[\/bash]<\/p>\n
[bash]
\nimport {
\n PRODUCT_SET_LIST_BODY,
\n PRODUCT_SET_MODE,
\n PRODUCT_SET_PRODUCT_INFO,
\n PRODUCT_SET_HAS_MORE,
\n} from “..\/constants\/index”<\/p>\n
export const set_list_body = (list_body) => {
\n return {
\n type: PRODUCT_SET_LIST_BODY,
\n list_body: list_body,
\n }
\n}<\/p>\n
export const set_mode = (mode) => {
\n return {
\n type: PRODUCT_SET_MODE,
\n mode: mode,
\n }
\n}<\/p>\n
export const set_product_info = (product_info) => {
\n return {
\n type: PRODUCT_SET_PRODUCT_INFO,
\n product_info: product_info,
\n }
\n}<\/p>\n
export const set_has_more = (has_more) => {
\n return {
\n type: PRODUCT_SET_HAS_MORE,
\n has_more: has_more,
\n }
\n}
\n[\/bash]<\/p>\n
index.js\u306eRedux\u5bfe\u5fdc<\/h4>\n
index.js \u3092 redux \u5bfe\u5fdc\u3055\u305b\u307e\u3059\u3002<\/p>\n
[bash]
\nimport React from ‘react’;
\nimport ReactDOM from ‘react-dom’;
\nimport ‘.\/index.css’;
\nimport App from ‘.\/App’;
\nimport * as serviceWorker from ‘.\/serviceWorker’;<\/p>\n
import {Provider} from “react-redux”;
\nimport {createStore} from “redux”;
\nimport rootReducer from “.\/reducers\/root”<\/p>\n
let store = createStore(rootReducer, \/* preloadedState, *\/
\n window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())<\/p>\n
ReactDOM.render(
\n
\n
\n <\/Provider>,
\n document.getElementById(‘root’));<\/p>\n[\/bash]<\/p>\n
\u3064\u307e\u3089\u306a\u3044\u4f5c\u696d\u3067\u3057\u305f\u306d\u3002\u304a\u75b2\u308c\u3055\u307e\u3067\u3057\u305f\u3002
\n\u3068\u308a\u3042\u3048\u305a\u3001\u4eca\u56de\u306f\u3053\u3053\u307e\u3067\u3067\u3001\u6b21\u56de\u306f\u3044\u3088\u3044\u3088\u3001graphql-request\u3092\u4f7f\u3063\u3066\u3001Apollo Server\u3078GraphQL\u8a00\u8a9e\u3067\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u305f\u308a\u3001\u66f4\u65b0\u3057\u305f\u308a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u306b\u7d9a\u3044\u3066 \u524d\u56de\u307e\u3067\u306e\u8a18\u4e8b\u3067ApolloServer\u914d\u4e0b\u3067GraphQL\u304c\u52d5\u4f5c\u3057\u3001GraphQL API\u3068\u3044\u3046\u304b\u3001GraphQL \u30af\u30a8\u30ea\u8a00\u8a9e\u3067\u3001\u5546\u54c1\u30c6\u30fc\u30d6\u30eb\u306e\u30c7\u30fc\u30bf\u767b\u9332\u3001\u8aad\u307f\u8fbc\u307f\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u4eca\u56de\u306f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React+Redux\u3067\u7d44\u307f\u59cb\u3081\u308b\u3068\u3053\u308d\u3092\u8aac\u660e\u3057\u307e\u3059\u3002React\u306f\u305d\u308c\u307b\u3069\u3067\u3082\u306a\u3044\u306e\u3067\u3059\u304c\u3001Redux\u306e\u3053\u3068\u3092\u308f\u304b\u3063\u3066\u3044\u306a\u3044\u3068\u30ca\u30f3\u30ce\u30b3\u30c3\u30c1\u30e3\u3088\u304f\u5206\u304b\u3089\u3093\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u5404\u81eaRedux\u306e\u4e88\u7fd2\u306f\u307f\u3063\u3061\u308a\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff13\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b(\u3053\u306e\u8a18\u4e8b) \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b \u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u8aac\u660e\u304c\u4e0b\u624b\u3067\u3001\u3069\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u3044\u3058\u3063\u3066\u3044\u308b\u306e\u304b\u308f\u304b\u308a\u306b\u304f\u304f\u306a\u308b\u3068\u601d\u3046\u306e\u3067\u3001\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u8868\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210 create-react-app \u3092\u4f7f\u3063\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308a\u307e\u3059\u3002 [bash] $ cd ~\/workspace\/graphql-master $ sudo npm install -g create-react-app $ create-react-app front [\/bash] npm \u3092\u4f7f\u3063\u3066\u5fc5\u8981\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb [bash] $ cd front $ npm start $ npm install –save react-router-dom redux react-redux graphql-request [\/bash] Redux\u306b\u5fc5\u8981\u306a\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\u3092\u4f5c\u6210 [bash] $ mkdir src\/actions $ mkdir src\/components $ mkdir src\/constants $ mkdir src\/containers $ mkdir src\/reducers $ mkdir src\/sass [\/bash] \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb App.js\u3092\u518d\u5b9a\u7fa9 \u81ea\u52d5\u751f\u6210\u3055\u308c\u305fApp.js\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001\u3054\u3063\u305d\u308a\u66f8\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002 \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u306freact-router-dom\u3092\u4f7f\u3044\u3001 Home\/About\/Product\uff08\u5546\u54c1\u30de\u30b9\u30bf\uff09 \u306e\uff13\u753b\u9762\u69cb\u6210\u306b\u3057\u307e\u3059\u3002 [bash] $ nano App.js [\/bash] [bash] import React from ‘react’; import {Router, Route} from “react-router-dom”; import history from ‘.\/history’; import Home from “.\/components\/home”; import About from “.\/components\/about”; import Product from “.\/components\/product”; function App() { return ( GraphQL \u3068 Apollo Server\u3092\u4f7f\u3063\u305f\u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9 ); } export default App; [\/bash] App.js\u306b\u8a18\u8ff0\u3057\u305f\u8af8\u3005\u3092\u5b9a\u7fa9 react-router\u306e\u30d2\u30b9\u30c8\u30ea\u30fc\u3092\u7ba1\u7406\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002 [bash] $ nano history.js [\/bash] [bash] import { createBrowserHistory as createHistory } from ‘history’ export default createHistory() [\/bash] \uff13\u753b\u9762\u5171\u901a\u306e\u30e1\u30cb\u30e5\u30fc\u5b9a\u7fa9\u3067\u3059\u3002 [bash] $ nano components\/menu.js [\/bash] [bash] import React from “react” import {Link} from “react-router-dom”; class Menu extends React.Component { render() { return ( Home About Product ) } } export default Menu; [\/bash] \u30db\u30fc\u30e0\u753b\u9762 [bash] $ nano componetns\/home.js [\/bash] [bash] import React from “react”; import Menu from “.\/menu”; class Home extends React.Component { render(){ return ( This is Home ) } } export default Home; [\/bash] About\u753b\u9762 [bash] $ nano componetns\/about.js [\/bash] [bash] import React from “react”; import Menu from “.\/menu”; class About extends React.Component { render(){ return ( This is About ) } } export default About; [\/bash] Product\u753b\u9762\uff08\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306e\u30e1\u30a4\u30f3\u753b\u9762) [bash] $ nano componetns\/product.js [\/bash] [bash] import React from “react”; import Menu from “.\/menu”; class Product extends React.Component { render(){ return ( This is Product ) } } export default Product; [\/bash] \u3053\u3053\u307e\u3067\u3092\u52d5\u4f5c\u78ba\u8a8d \u3053\u3093\u306a\u611f\u3058\u306b\u8868\u793a\u3055\u308c\u308c\u3070\u3001\u6210\u529f\u3067\u3059\u3002 Redux\u306ereducer\u3092\u5b9a\u7fa9 \u3053\u3053\u304b\u3089\u306f\u3000redux\u306e\u57fa\u790e\u77e5\u8b58\u304c\u3042\u308b\u524d\u63d0\u3067\u66f8\u304d\u9032\u3081\u307e\u3059\u3002 \u30c4\u30e9\u30a4\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u5199\u7d4c\u3057\u3066\u304f\u3060\u3055\u3044\u3002 [bash] $ nano reducers\/root.js [\/bash] [bash] import {combineReducers} from “redux”; import product from “.\/Product\/product”; const…<\/p>\n","protected":false},"author":1,"featured_media":1914,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[77],"tags":[102,101,86],"class_list":{"0":"post-1905","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-apollo","9":"tag-graphql","10":"tag-react"},"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
![\"Screenshot](\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-19-00-23-1024x973.png\")
<\/a><\/p>\n![\"Screenshot](\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-12-23-43-06.png\")
<\/a><\/p>\n