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

Question

i'm studying React/Redux and i tried to do something on my own besides courses. So i'm replicating an atlas from a game i play called Path of Exile, but with some changes. For example, the main problem i'm trying to "solve" is to click on a map and it highlights it showing that map it's completed, and if you click it again that map will uncomplete. like the examples in the imgs:

Completed Maps

Uncompleted Maps

My problem is that when i click on one map, all other maps are marking as completed. On the images there are only 2 maps but there is 156 maps and obviously i don't want to click on map X and highlight all other maps.

This is the component i load each Map:

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>
);

This is my Map component:

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);

this is my Map Actions:

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

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

this is my 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;
    }
};

As i said i'm still learning, i'm sure i'm doing something wrong, i just don't know what, If my doubt wasn't clear enough, tell me and i'll try to rewrite it! Thank you!

Answer 1

If you want to mark just some maps as completed/uncompleted, you should keep in redux a structure to know which ones are completed, and which ones are not.

For example, your store should look something like this:

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

You can asume that if a map ID is not in that array, the map is not completed. In such case, your action creators should change also. Instead of just passing if a map is completed or not, you have to provide the identifier of the map you're refering.

Obviously, it's just an example and it's not the best implementation to solve your problem, indeed. It's up to you to find the one that fits with your problem. However, the basic idea will still being the same: you have to provide to your components, action creators and so that your reducers, the identifier of the map you want to apply your action.