redux todomvc： `mapStateToProps`を理解できません

Question

redux todomvcを見ると、まだconnectとmapStateToPropsで混乱しています。 todomvc/SRC /コンテナ/ App.jsの符号

一部は次のとおり

const mapStateToProps = state => ({ 
    todos: state.todos 
}) 

stateはReduxの「ストア内の状態です。しかし、stateにはtodosというプロパティがあり、これは配列であるとは混乱しています。 todosは還元剤であり、機能はhereとhereです。 https://github.com/reactjs/react-redux/blob/master/docs/api.mdを読んだ後でもまだmapStateToPropsが何をしているのか理解できません。

コメントは歓迎します。ありがとう

Answer 1

あなたのアプリの状態は、状態と呼ばれる1つのオブジェクトに一緒に存在します。新しい減速機を作成するときは、それをcombineReducersヘルパーに含める必要があります。このことが起こっているのは、fileです。それぞれのレデューサーに使用するキーの名前は、実際にはその状態で同じ名前になります。この場合、それはtodosです。新しい減速機を作成してcombineReducersヘルパーにusersと入力した場合は、state.usersと表示されます。

Answer 2

私はそれを試してみましょう。私は十分に簡潔であることを願っています。

正しく表示されているように、「状態」は「mapStateToProps」に渡されます。これは、あなたのレデューサーを含むオブジェクトです - 各レデューサーの "店舗"または "状態"。

たとえば、投稿した2番目の例が次のように表示された場合、

import { combineReducers } from 'redux' 
import todos from './todos' 
import products from './products' 

const rootReducer = combineReducers({ 
    todos, 
    products 
}) 

export default rootReducer 

「商品」状態になりました。主要なアプリストア - その「combineReducers」の機能は、すべてのあなたのレデューサーは「組み合わせ」と基本的には「状態/ストア」の下にキーを作成しますので、そうmapStateToPropsに渡され、あなたの「状態」オブジェクトは、この

state = { 
    todos, 
    products 
} 

のように見えます。覚えておいてください、reduxはあなたの世界的な状態の真理の1つの源のこのアイデアを作成します。したがって、combingReducersによって、これらの新しい状態オブジェクトをキーとして "グローバル状態"に配置します。つまり、複数のレデューサーがある場合です。多くの場合、あなたはただ一つしか持っていません。そして、何度も、あなたは「あなたのすべての国家」、多分単なるスライスを望んでいないかもしれません。

あなたのコンポーネントは、これを行ったとします。

const mapStateToProps = state => ({ 
    todos: state.todos, 
    products: state.products 
}) 

コンポーネントは今下記にアクセスがあります：

this.props.todos 
this.props.products 

をすべてmapStateToPropsされない上に、これらの値をマッピングすることで、あなたのコンポーネントに、この「グローバル」店/状態にアクセスすることが便利になりますあなたのコンポーネント。基本的に、それはあなたのコンポーネントをゴブリングし、小道具を追加し、それからあなたの新しい価値を変更して戻します。