Реагировать, пытаясь сделать боковую панель с редуксом

Question

Я новичок, чтобы среагировать, пытаюсь сделать боковую панель.

Мне уже удалось достучаться до редуктора.

// sidebarReducer.js
const sidebar = (state = { visible: false }, action) => {
switch (action.type) {
    case "SHOW":
        console.log("show"); 
        return { ...state, visible: true };
    case "HIDE":
        console.log("hide");
        return { ...state, visible: false };
 default:
    return state;
  }
};

export default sidebar;

.

class SidebarContainer extends Component {
handleOpen = () => {
    this.props.dispatch({ type: 'SHOW'});
}
handleClose = () => {
    this.props.dispatch({ type: 'HIDE'});
}

handleToggle = () => {
    const { visible } = this.props;
    const { handleClose, handleOpen } = this;
    if(visible) return handleClose();
    handleOpen();

    console.log(visible); // ouput : undefined.
}

render(){
    const { visible } = this.props;
    const { handleToggle, handleClose } = this;

    return[
        visible && <Dimmer onClick={handleClose} key="dimmer"/>,
        <Sidebar visible={visible} onClose={handleClose} key={0}/>,
        <Hamburger active={visible} onToggle={handleToggle} key={1}/>
    ]
  }
}

export default connect()(SidebarContainer);

Когда вызывается событие handleToggle, я получаю два журнала, которые "показывают" из console.log ("show") в sidebarReducer.js и "undefined" из console.log (видимого) в SidebarContainer.js.

когда видимое имеет значение true, будет показан компонент диммера, боковой панели и гамбургера. но поскольку я не знаю причину, по которой видимое не определено, оно не отображается. Подскажите пожалуйста причину ??

Answer 1

Внутри render вы импортируете visible из this.props:

const { visible } = this.props;

Но как они переходят к компонентам реквизита?

Значение visible хранится в Redux и должно быть подключено к компоненту React, чтобы вы могли его использовать.

Как видите, ничего не связано:

export default connect()(SidebarContainer);

Так что вам нужно подключить его так:

const mapStateToProps = state => {
  return {
    visible: state.REDUCER_NAME.visible // propably sidebar
  }
}

export default connect(mapStateToProps, null)(SidebarContainer);

Пожалуйста, проверьте Реализация компонентов раздел в Redux Doc. для более глубокого понимания.

ПРИМЕЧАНИЕ: то же самое относится к действиям (функции, которые вы вызываете с реквизитов: this.prop.actionName - они также должны быть подключены к компоненту через mapDispatchToProps)

Answer 2

Вы должны подключить свой компонент к вашему состоянию / действиям.

export default connect(state => ({
    visible: state.sidebar.visible
 }),
 {
   show: sidebarActions.show
 }
 )(SidebarContainer);

что-то в этом роде.

Проверка: методы mapStateToProps и mapDispatchToProps из избыточной документации