React Context API - могут ли дети / потребители требовать, чтобы поставщик изменил значение?

Question

Ранее я использовал Redux, и в этот раз я хочу реализовать Context API. Я очень хочу сделать то, что описано в React Context API - Как получить ссылку на объект состояния в поставщике для условного метода - однако, я хочу, чтобы функция «изменения» была более общей - она ​​изначально выглядит так:

class ProviderComp extends Component{
    state={
        name: "Gary",
        age: 20,
        color: "Red",
        changeMind: ()=>{
            if(this.state.color === "Red"){
                this.setState({
                    name: "Tony",
                    age: 35,
                    color: "Blue"
                })
            }
            if(this.state.color === "Blue"){
                this.setState({
                    name: "Gary",
                    age: 20,
                    color: "Red"
                })
            }
        }
    }

но вместо "changeMind ()" я бы хотел изменить (prop, val), чтобы вызывать:

change("name","Bob")

изменит имя.состояния на Боб

change("age", 30)

изменит state.age на 30 и т. Д.

Возможно ли это? Я пытаюсь сделать что-то аналогичное тому, как ребенок в Redux отправляет запрос на изменение, а родительский редуктор получает запрос и обновляет его соответственно.

Я, вероятно, неправильно думаю о Контексте, поскольку я не просто предоставляю исходящие данные, а затем потребляю нисходящие потоки, я пытаюсь заставить нижестоящих потребителей отправлять обратные запросы поставщику, чтобы они изменили вещи - очень открыты для обучения. лучший способ думать!

Answer 1

Да, просто передайте функцию изменения в значение контекста. В вашем компоненте, который содержит провайдер контекста

changeMind = mind => this.setState({mind})

render() {
  <Context.Provider value={{mind : this.state.mind, changeMind : this.changeMind}}>
  </Context.Provider>
}

Затем в компоненте, у которого есть потребитель, вы можете вызвать context.changeMind, что приведет к изменению значения провайдера, например,

<Context.Consumer>
{
  contextValue => (<button onClick={contextValue.changeMind}>Change</button>)
}
</Context.Consumer>

Answer 2

Для изменения значения провайдера, <Provider> должен быть повторно обработан. Итак, речь идет о создании компонента, в котором размещается поставщик, для хранения и обновления состояния:

class ProviderComp extends Component {
  state = {
    change: (key, val) => this.setState({ [key]: val }),
    ...
  };

  render() {
    return <SomeContext.Provider value={this.state}>...</SomeContext.Provider>
  }
}