Question

我试图弄清楚如何在我的React-Component内部使用Reducer。我的目标很简单 - 至少我是这么想的：我想切换抽屉菜单。我知道我可以用React-Only解决这个问题，但我想学习Redux。

所以，我有一个组件......

import React, { Component } from 'react';

class Example extends Component {

// ???

  render() {
    return (
        <button className="burgerbutton" onClick={this.toggleDrawer}</button>
        <div className="drawerMenu isvisible" ></div>
    );
  }
}

export default Example;

也是减速机

const initialState = {
  buttonstate: false
};

const example = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_BTN':
      return Object.assign({}, state, {
        buttonstate: !state.buttonstate
      })
    default:
      return state
  }
}

export default example

和一个动作（虽然我不知道该放哪个，因为它很简单）

export const toggleDrawer = () => {
  return {
    type: 'TOGGLE_DRAWER'
  }
}

我阅读了很多教程，其中大部分都希望我分开＆＃34;演示组件＆＃34;和＃34;容器组件＆＃34;。我真的不能在这里看到这些概念是如何应用的。那么我该做些什么来做这项工作呢？我是从正确的角度看待这个问题还是我需要12＆＃34;容器组件＆＃34;解决这个问题？

我真的希望这个问题有意义和/或不重复！

Answer 1

在redux中，您必须调度操作以更新reducer状态。所以通常一个组件连接到redux存储，并通过dispatch进行通信。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from 'action file location';

class Example extends Component {

   toggleDrawerHandler() {
     this.props.dispatch(toggleDrawer())
   }


  render() {
    // access button state from this.props.buttonstate
    return (
        <button className="burgerbutton" onClick={this.toggleDrawerHandler.bind(this)}</button>
        <div className="drawerMenu isvisible" ></div>
    );
  }
}

export default connect((store) => {buttonstate: store.buttonstate})(Example);

Answer 2

首先，我真的很喜欢使用redux "ducks"，它基本上是一个redux reducer bundle。您将reducer，action constants和action creators放在一个文件中（称为duck）。那么你可能有多个不同模块或状态片段的鸭子，然后你会与combineReducers结合使用。

虽然@duwalanise有正确的想法，但我宁愿看到connect()的第二个参数用于直接将动作映射到发送（并且它有一个很好的快捷方式）而不是必须使用this.props.dispatch

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from './duck';

class Example extends Component {

  render() {
    const { buttonstate, togglerDrawer } = this.props;
    return (
      <div>
        <button className="burgerbutton" onClick={toggleDrawer}</button>
        <div className="drawerMenu isvisible" ></div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
    buttonstate: state.buttonstate,
});

export default connect(mapStateToProps, { toggleDrawer })(Example);

一方面注意，如果组件中有处理程序方法，最好在构造函数中执行.bind(this)，而不是在事件内使用箭头函数或.bind(this)，即不要这样做onClick={() => /* do something */ }或onClick={this.myHandler.bind(this)} This是一个有趣的（并且很长）阅读。

要触及Container vs Presentational Component文件：想法是将所有逻辑，处理程序，redux动作等放入容器中，并通过props将其传递给简单（希望无状态/纯函数）的表示组件。从技术上讲，您编写的组件可以转换为无状态组件：

const Example = ({ buttonstate, togglerDrawer }) => (
  <div>
    <button className="burgerbutton" onClick={toggleDrawer}</button>
    <div className="drawerMenu isvisible" ></div>
  </div>
);

React / Redux从组件

2 个答案: