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

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

ただいまの
回答率

88.81%

Reduxのチュートリアルを終えて、勉強しているのですが、値を受け渡す方法が分かりません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 382

nakamura0907

score 51

実現したいこと

現在のcountやtext、onClick()関数を受け渡す方法が理解できませんでした。

題材に選んだのは、ボタンを押すと1加算されるカウンターです。

export const INCREMENT = 'INCREMENT';

export function increment(count) {
    return { type: INCREMENT, count }
}
import { combineReducers } from 'redux'
import { INCREMENT } from './actions';

const COUNT = {
    count: 0
}

function counts(state = COUNT, action) {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        default:
            return state;
    }
}

const counter = combineReducers({
    counts
});

export default counter;
import { connect } from 'react-redux';
import { increment } from '../actions';
import Counter from '../components/Counter';

const mapStateToProps = (state) => {
    return state;
}

const mapDispatchToProps = (dispatch) => {
    return {
        onClick: () => { dispatch(increment()) }
    }
}

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default CounterContainer;
import React from 'react';

const Counter = ({ count, onClick, text }) => (
    <>
        <p>{count}</p>
        <button
            onClick={onClick}
        >
            {text}
        </button>
    </>
);

export default Counter;

追記

ContainerのmapStateToPropsを以下のようにしたら値が渡りました。

const mapStateToProps = (state) => {
    return {
        count: state.counts.count,
        text: 'ADD!'
    }
}


しかし依然としてmapDispatchToProps が上手く行きません

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

こんにちは

reducers の case INCREMENT: で、新しいstateを返す行を以下のように修正してみるといかがでしょうか?

修正前:

case INCREMENT:
    return state + 1;

 
修正後:

case INCREMENT:
    return { count: state.count + 1 };

 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/17 09:52

    できました!オブジェクトを返すのですね。

    昨日から勉強を始めたので、理解がまだできていないようです。それぞれの役割と何を返すのかについて教えてください
    action:何をするのかが書いてあり、アクションクリエイターを使用する
    reducer:actionの種類によって処理を行う。オブジェクトをstoreに渡す
    store:UIの更新を行う?
    で合っていますか?

    キャンセル

  • 2020/04/17 19:34 編集

    > できました!

    とのことでよかったです👏

    > それぞれの役割と何を返すのかについて教えてください

    > action:何をするのかが書いてあり、アクションクリエイターを使用する

    「何をするのかが書いてあり、」までは、ほぼ正しくて、「アクションクリエイターを使用する」は「アクションクリエイターによって作られる」がより正確です。

    次に

    > reducer:actionの種類によって処理を行う。オブジェクトをstoreに渡す

    についてですが、

    > actionの種類によって

    は、"種類によって" ではなく、 "タイプ(type)によって" と理解しておいたほうがより正確です。

    「処理を行う。」と、「オブジェクトをstoreに渡す」では、reducerが何をやってくれるのかの説明として、十分ではありません。では正確(=必要十分)な説明はどうなるか、については最後に書いたようにQiitaに記事を上げたので参考にしてください。

    三つ目の

    > store:UIの更新を行う?

    については間違いです。(それもかなり大きな)

    なぜかというと、redux はそれ単体ではUIと結びついているものではないからです。これをはっきり理解するためには、redux を使うけれども、react を使わない(つまりreact-reduxも使わない)ようなプログラムを書いてみるとよいです。(可能ならばコマンドラインで動かすものなら尚良し)

    では、store とは何か?ということですが、
    action
    reducer
    store
    の3つまとめて、その定義を私も確認する目的で、以下の記事にしました。

    【公式私家訳】Reduxの基本概念:Actions(アクション), Reducers(リデューサ), Store(ストア)とは何か?
    https://qiita.com/jun68ykt/items/ffee7688a2b0c6ed6c19

    特に、概念を整理するうえで、store の説明の中にUI という言葉は出てこないことに注意を払うとよいでしょう。

    キャンセル

  • 2020/04/17 22:06

    ありがとうございます!!さっそく読んでみます!

    キャンセル

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

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る