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

Question

実現したいこと

現在の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 が上手く行きません

Answer 1

こんにちは

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

修正前：

case INCREMENT:
    return state + 1;

修正後：

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

Comments

[退会済みユーザー]

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

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

[jun68ykt]

> できました!

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

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

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

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

次に

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

についてですが、

> actionの種類によって

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

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

三つ目の

> store:UIの更新を行う?

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

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

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

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

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

[退会済みユーザー]

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