Блог

У меня есть приложение, когда большая часть данных хранится в магазине, но выбранный элемент предоставляется при использовании React.Контекст.

React-Redux предоставляет connect api, который принимает mapStateToProps функцию с state компонентом и props в качестве компонента.

Чего бы я хотел, если бы это не сломало крючки, так это что-то вроде:

 function mapStateToProps(state){
  const selectedItemId = useContext(MySelectedItemContext)
  return {
    item: state.items[selectedItemId]
  }
}
 

но, конечно, это невозможно, так как я нахожусь вне компонента и не могу вызвать useContext.

Итак, я попытался использовать старый контекст API:

 function mapStateToProps(state, props){
  return {
    item: state.items[props.id]
  }
}
export default connect(mapStateToProps)((props) =>
  <MySelectedItemContext.Consumer>
  { selectedItemId => <Component id={selectedItemId} {...props}/> }
  </MySelectedItemContext.Consumer>)
 

но это все равно не работает, потому что connect возвращает новый компонент, в котором потребитель находится внутри, а не снаружи, а идентификатор prop еще не определен в mapStateToProps.

Есть идеи?

Лучший способ-удалить mapStateToProps и использовать useSelector хуки и селекторы Redux. Но если вам нужно mapStateToProps , вы можете обернуть свой компонент, который должен быть подключен к Redux, в другой компонент, который получит значение из контекста и передаст его компоненту, использующему Redux.

 // Use this component
export function ContextConsumerComponent() {
  const selectedItemId = useContext(SelectedItemIdContext);

  return <ReduxConsumerComponent id={selectedItemId} />;
}

function mapStateToProps(state, props) {
  return {
    item: state.items[props.id]
  }
}

const ReduxConsumerComponent = connect(mapStateToProps)((props) => {
  // props.item will be here
});