React/Redux 单击时激活多个组件

Question

我正在学习 React/Redux 并且我尝试在课程之外自己做一些事情。所以我正在从我玩的一个名为流亡之路的游戏中复制地图集，但有一些变化。例如，我试图“解决”的主要问题是点击地图，它会突出显示地图已完成，如果你再次点击它，地图将不完整。就像 imgs 中的示例：

Completed Maps

Uncompleted Maps

我的问题是，当我单击一张地图时，所有其他地图都标记为已完成。在图像上只有 2 张地图，但有 156 张地图，显然我不想单击地图 X 并突出显示所有其他地图。

这是我加载每个地图的组件：

export default props => (
    <div className="regions">
        <Region region="haewark_hamlet">
            <Map
                map_title="Bog"
                map_name="bog"
                white_map={maps.haewark.bog.white}
                yellow_map={maps.haewark.bog.yellow}
                red_map={maps.haewark.bog.red}
                map_tier="3"
            />
            <Map
                map_title="Vaal Pyramid"
                map_name="vaal_pyramid"
                white_map={maps.haewark.vaal_pyramid.white}
                yellow_map={maps.haewark.vaal_pyramid.yellow}
                red_map={maps.haewark.vaal_pyramid.red}
                map_tier="3"
            />
        </Region>
        <Region region="tirns_end" />
        <Region region="glennach_cairns" />
        <Region region="new_vastir" />
        <Region region="lex_ejoris" />
        <Region region="lex_proxima" />
        <Region region="valdos_rest" />
        <Region region="lira_arthain" />
    </div>
);

这是我的地图组件：

const Map = props => {
    const { completed } = props;

    const toggleComplete = function () {
        completed ? props.mapUncomplete() : props.mapComplete();
    };

    return (
        <div className={`map ${props.map_name}`} id={props.map_name}>
            <div className="map-name">{props.map_title}</div>
            <img className="map-size" src={base_map} alt="base map" />
            <div className="map-tier-color">
                <img
                    className={`map-size ${props.map_name}-white`}
                    src={props.white_map}
                    alt={`${props.map_name} white map`}
                />
                <img
                    className={`map-size ${props.map_name}-yellow`}
                    src={props.yellow_map}
                    alt={`${props.map_name} yellow map`}
                />
                <img
                    className={`map-size ${props.map_name}-red`}
                    src={props.red_map}
                    alt={`${props.map_name} red map`}
                />
            </div>
            <div className="map-tier-number">Tier {props.map_tier}</div>

            <div
                className={`toggle-completed ${completed ? "completed-map" : ""}`}
                onClick={() => toggleComplete()}
            ></div>
        </div>
    );
};

const mapStateToProps = state => ({
    completed: state.poeapp.completed,
});

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            mapComplete,
            mapUncomplete,
        },
        dispatch,
    );

export default connect(mapStateToProps, mapDispatchToProps)(Map);

这是我的地图操作：

export const mapComplete = () => ({
    type: "MAP_COMPLETE",
    payload: true,
});

export const mapUncomplete = () => ({
    type: "MAP_UNCOMPLETE",
    payload: false,
});

这是我的 Map Reducers：

const INITIAL_STATE = {
    completed: false,
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "MAP_COMPLETE":
            return { ...state, completed: action.payload };
        case "MAP_UNCOMPLETE":
            return { ...state, completed: action.payload };
        default:
            return state;
    }
};

正如我所说，我仍在学习，我确定我做错了什么，我只是不知道是什么！如果我的疑问不够清楚，请告诉我，我会尝试重写它！谢谢！

Answer 1

如果你只想将一些地图标记为 completed/uncompleted，你应该在 redux 中保留一个结构来知道哪些已完成，哪些未完成。

例如，您的商店应如下所示：

{
   ...
   completed: [0,2,3,...,78,90],
}

您可以假设，如果地图 ID 不在该数组中，则地图未完成。在这种情况下，您的动作创建者也应该改变。您必须提供所引用地图的标识符，而不仅仅是传递地图是否完成。

显然，这只是一个示例，并不是解决您的问题的最佳实施方式。找到适合您的问题的那个取决于您。但是，基本思想仍然是相同的：您必须向您的组件、动作创建者以及您的减速器提供您要应用动作的地图的标识符。

React/Redux 单击时激活多个组件

React/Redux Multiple components activatated on click

javascript

reactjs

redux

action

reducers