hello world reducer 用于 react/redux

Question

还有一些其他关于 react 的 hello world 应用程序问题，但我的问题是特定于 reducer 的。我不确定我应该在减速器中放入什么来执行我的具体操作。

注意*：我想也许我需要在我的初始状态中添加一条消息：“”键值对，然后声明一个

var newState = Object.assign({}, state, {
      message:"hello world"
    });

进入reducer中的if语句，然后在组件中调度它，但这似乎是不必要的，因为它应该总是打印hello world，所以硬编码似乎更有效。希望这个问题也没有太多混乱。

这是我的组件：

var HelloWorld = React.createClass({
  helloWorld: function() {
    this.props.dispatch(actions.printHello());
  },
  render: function() {
    return (
      <div className="HelloWorld">
        <h1>Hello World!</h1>
      </div>
    );
  }
});

var Container = connect()(HelloWorld);

module.exports = Container;

我的行动：

var $ = require("jquery")

var PRINT_HELLO = 'PRINT_HELLO';
var printHello = function() {
    return {
        type: GUESS_NUM
    };
};

exports.PRINT_HELLO = PRINT_HELLO;
exports.printHello = printHello;

和减速器：

var actions = require('./actions');

var initialRepositoryState = {
  type: null
};

var capstoneApp = function (state,action) {
  state = state || initialRepositoryState;


  if (action.type === actions.PRINT_HELLO) {
    var newState = Object.assign({}, state, {
      message:"hello world"
    });
    return newState;
  }
};

我认为您不需要我的 index.js，但如果需要，我会提供。 提前感谢您的意见！

Answer 1

reducer 保存你的状态。所以思考它的方式是“我的程序中有哪些部分可以改变？”然后从那里开始，下一个问题是“保持我的程序所需的最少状态量是多少？”

通过查看您的示例，我得到的印象是您正在尝试构建一个有时在 UI 中显示“hello world”的应用程序。让我再做一些互动来帮助描述所有部分。

最初，我将帮助您创建一个具有空标签和按钮的程序。当你点击按钮时，它会显示“hello world”。

好的，那么回答第一个问题：可以改变什么？该应用程序可以显示“hello world”或什么也不显示。我们可以用几种不同的方式存储它。如果字符串是硬编码的，就像你上面提到的那样，那么你真的有一个 bool 来显示消息，或者没有。

关于第二个问题：一个真实值几乎是最小状态的定义。所以让我们做一个reducer：

var initialState = {
    showMessage: false,
};

var reducer = function(state, action) {
    var newState = Object.assign({}, state);
    if (action.type === 'BUTTON_PRESS') {
        newState.showMessage = !newState.showMessage;
    }
    return newState;
}

好的，现在我们创建了一个 reducer，当它获得 BUTTON_PRESS 操作时，它会翻转它的状态位。

现在，让我们谈谈如何将 reducer 连接到 redux。现在，reducer 是一个普通的 javascript 函数。我们只需要将该 store 传递到具有初始状态的 redux 中。 [createStore][1]

附：我一般是写ES2015代码，所以commonJS导入语法中可能会有小错别字

var redux = require('redux');
var store = redux.createStore(reducer, initialState);

接下来看redux-react。 Redux-react 是一种在反应中双向起作用的胶水。它将来自 redux 存储的数据连接到 react props，并将 react 回调（例如点击）连接到 redux 操作。

所以从概念上讲，它看起来像这样。您有一个带有按钮的反应组件。当您单击按钮时，我们希望生成一个“BUTTON_PRESS”动作。在此之后，您的反应组件不再关心 BUTTON_PRESS 会发生什么。它的工作已经完成。 BUTTON_PRESS 可以做无限的事情之一。现在，假设 redux-react 完成了它的工作并将 action 传递给了 reducer。 reducer 计算它的新逻辑并返回一个新状态。这个新状态的值是 showMessage。然后，redux-react 完成连接的另一半，并使 showMessage 成为组件的道具。需要明确的是，没有明确的理由说明为什么同一个 react 组件必须响应您的操作更改的状态。它们可能是不同的组件。

为了把它放在要点中，代码流应该是这样工作的：

1. 我们使用 showMessage = false 创建一个初始存储
2. 在创建 React 组件时，我们使用connect 将showMessage 绑定到一个prop，并处理组件中按钮的onClick 以生成'BUTTON_PRESS' 动作。
3. 由于 showMessage 为 false，所以原本只有一个按钮。
4. 用户按下按钮。响应对 onClick 处理程序的调用
5. 我们使用 redux-react 来调度 BUTTON_PRESS 事件
6. 当 redux 获得一个动作时，它会调用具有当前状态和动作的 reducer。 reducer 负责生成一个新的状态来响应这个动作
7. reducer 将 showMessage 设置为 true
8. redux-react 监听 store 的变化，当它发生变化时，它会修改 react 组件的 prop
9. 道具发生变化，因此 react 调用 render()
   10. 在您的渲染方法中，您看到 this.props.showMessage 为真，因此您显示了消息。

下面是如何实现这样的反应组件。 ES5 和 ES2015 中的 React 组件之间有足够的差异，我只是给你 ES2015 版本并再次道歉。

class HelloWorld extends Component {
    render() {
        const message = this.props.showMessage ? "Hello world!" : "";
        return (
        <div id="label">{message}</div>
        <div id="button" onClick={this.props.handleOnClick}>Toggle the message </div>
        );
    }
}

HelloWorld.propTypes = {
    showMessage: PropTypes.bool.isRequired,
    handleOnClick: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
    showMessage: state.showMessage,

});

const mapDispatchToProps = dispatch => ({
    handleOnClick: dispatch({ type: 'BUTTON_PRESS', payload: '' })
});

export default connect(mapStateToProps, mapDispatchToProps)(HelloWorld);

您可以继续阅读文档，但我希望这有助于解释所有部分是什么。让我知道是否有任何不清楚的地方。 [1]：http://redux.js.org/docs/api/createStore.html