我应该在哪里发送我的 redux

Question

我正在学习 react 和 redux，我只是有一个小问题，我应该在哪里分派和共享我的 redux store 来反应组件，我应该在任何需要 store 的组件中共享和分派我的 store 或者我应该在一个主要组件中共享和分派我的商店并将该值作为道具共享以订购组件？例如，我有这三个组件，我将我的状态存储在一个 FlashCard 组件中，并使用 props 将该状态共享给 Cardlist 组件，然后 CardList 组件会将这些 props 发送给 Card 组件。这是正确的做法吗？并且在卡片组件中我使用 dispatch 因为它看起来更方便，但是我是否应该在我的主要组件 FlashCard 中也使用 dispatch 并将更改传递给 Card 组件？感谢您的帮助。

import React from 'react';
import CardList from './cardList';
import {connect} from 'react-redux';

const FlashCard =(props)=>{
    return (
    <div>
        <CardList
            cards={props.cards}
        />
    </div>
)}

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

export default connect(mapStateToProps,null)(FlashCard)

和

import React from 'react';
import Card from './card';

const CardList =(props)=>{
    const card=props.cards.map((c,i)=>(
        <Card
            key={i}
            card={c}
        />
    ))
    return(
    <div>{card}</div>
)}

export default CardList

和一个 Card 组件来渲染所有卡片

import React from 'react';
import {connect} from 'react-redux';
import { showCardInfo, hideCardInfo } from '../redux/flashCardRedux';

const Card =(props)=>{
    const onCardClick=()=>{
        console.log(props.card.id)
    }
    return (
    <div>

        {props.card.showInfo?

        <div
            onClick={()=>props.dispatch(hideCardInfo(props.card.id))}
        >{props.card.name}</div>
        :
        <div
            className='card'
            onClick={()=>props.dispatch(showCardInfo(props.card.id))}
        >
            <div className='img'>
                <img src={props.card.img}/>
                <h3>{props.card.name}</h3>
            </div>
        </div>}

    </div>

)}

export default connect()(Card)

Answer 1

对我来说，我发现最好的做法是只在主组件中引用 dispatch 并且只传入子组件需要的属性。这不仅意味着您不会将 dispatch 传递给所有内容，而且还允许在需要时对较小的组件进行单元测试。

它还保留了更小的组件"lighter"，因为它们只有它们需要的，然后可以很容易地在您应用的其他区域呈现。

将来，如果您想用 Redux 换成类似的东西，这意味着您只需在主要组件中编辑代码，而不用在系统的任何地方编辑代码。

Answer 2

Its always recommended to use dispatch in parent component because 
child is also part of parent but as per requirement you can shift.

as you have parent to child connection either you can connect in 
parent and pass data as `props` or either you can take out in child 
component itself, it depend upon how complex your parent and 
child.however for smaller component always use as props else go for 
component wise connect.

for more info [follow this](https://reactjs.org/)

我应该在哪里发送我的 redux

where should I dispatch my redux

reactjs

redux

react-redux

react-props