2

このような新しい「Context API」で作成されたオブジェクトの配列があります...

const reducer = (state, action) => {
    switch (action.type) {
        case "DELETE_CONTACT":
            return {
                ...state,
                contacts: state.contacts.filter(contact => {
                    return contact.id !== action.payload;
                })
            };
        default:
            return state;
    }
};

export class Provider extends Component {
    state = {
        contacts: [
            {
                id: 1,
                name: "John Doe",
                email: "jhon.doe@site.com",
                phone: "01027007024",
                show: false
            },
            {
                id: 2,
                name: "Adam Smith",
                email: "adam.smith@site.com",
                phone: "01027007024",
                show: false
            },
            {
                id: 3,
                name: "Mohammed Salah",
                email: "mohammed.salah@site.com",
                phone: "01027007024",
                show: false
            }
        ],
        dispatch: action => {
            this.setState(state => reducer(state, action));
        }
    };

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        );
    }
}

ペイロードとしてアクションに渡す ID に基づいて各連絡先の「表示」プロパティを編集できるようにするアクションを「リデューサー」に作成したいのですが、どうすればそれを行うことができますか?

4

2 に答える 2