質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

449閲覧

ReduxのReducerでは式の前にreturnを書かないと、その式は実行されないのでしょうか。

tomoharu

総合スコア107

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/06/11 15:47

当方 reduxの勉強中です。
現状コード:

import { createStore, combineReducers } from 'redux'; import uuid from 'uuid'; const addExpense = ( { description = '', note = '', amount = 0, createAt = 0 } = {} ) => ({ type: 'ADD_EXPENSE', expense: { id: uuid(), description, note, amount, createAt } }) const expensesReducerDefaultState = []; const expensesReducer = (state = expensesReducerDefaultState, action) => { switch (action.type) { case 'ADD_EXPENSE': return state.concat(action.expense); default: return state; } }; const filterReducerDefaultState = { text: '', sortBy: 'date', startDate: undefined, endDate: undefined } const filterReducer = (state = filterReducerDefaultState, action) => { switch (action.type) { default: return state; } } const store = createStore( combineReducers({ expenses: expensesReducer, filters: filterReducer }) ) store.subscribe(() => { console.log(store.getState()); }); store.dispatch(addExpense({ description: 'Rent', amount: 100 })); const demoState = { expenses: [{ id: 'dsdssdsds', description: 'jajaj dsdssd', note: 'this is final', amount: 433334, createdAt: 0 }], filters: { text: 'rent', sortBy: 'amount', startDate: undefined, endDate: undefined } };

質問:expenseReducer内にある、case 'ADD_EXPENSE'の処理ですが、returnを書かないと処理が実行されず、stateの中身が変更されません。returnを書かないと処理が実行されないとルールなどがあるのでしょうか。JSではそのようなものはなかったと思うのですが。。。 何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

return文がないと実行されないわけではなく、単にreduxはreducerが返した値を次のstateとして使用するということになっているだけです。

Reducers - Redux

The reducer is a pure function that takes the previous state and an action, and returns the next state.

(訳: reducerは直前のstateとactionを受け取って次のstateを返す純粋な関数である。)

投稿2019/06/11 18:35

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2019/06/11 22:11

純粋な、がポイントだと思います
tomoharu

2019/06/12 01:24

そういうことですね。ありがとうございます! ということはstoreの中身がupdateされているわけではなく、storeの中身をもとに計算された新しいstateが返されるという理解でよろしいでしょうか。
karamarimo

2019/06/12 03:42

まさしくその通りです。arrayのconcatメソッドは元のarrayを変える(mutate)ことなく新しいarrayを返すので、今のままでpureなfunctionになっているわけです。
tomoharu

2019/06/12 15:09

ありがとうございます!もう一つだけ確認なのですが、そうしますと、storeは最初defaultの値がsetされていなければならないという理解でよろしいでしょうか。そうでないと、storeをもとに計算することができないですよね。。。
tomoharu

2019/06/13 04:04

了解しました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問