react/redux 的你好世界减速器

Question

关于反应，还有一些其他的 hello world app 问题，但我的问题是针对减速器的。我不确定我应该为我的具体操作在减速器中放入什么。

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

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 持有你的状态。所以思考的方式是 "what are the parts of my program that can change?" 然后从那里开始，下一个问题是 "What is the minimal amount of state needed to hold on to my program?"

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

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

好了，那么回答第一个问题：能改变什么？该应用程序可以显示 "hello world" 或什么都不显示。我们可以用几种不同的方式存储它。如果字符串是硬编码的，就像您在上面提到的那样，那么您确实有 bool 显示或不显示消息。

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

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;
}

好的，现在我们已经创建了一个减速器，当它获得 BUTTON_PRESS 动作时，它会翻转其状态的位。

现在，我们来谈谈如何将 reducer 连接到 redux。现在，reducer 是一个普通的 javascript 函数。我们只需要将该存储传递给具有初始状态的 redux 即可。 [创建商店][1]

P.S。我通常编写 ES2015 代码，所以在 commonJS 导入语法中可能会有小错别字

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

接下来就是看redux-react了。 Redux-react 是一种在 React 中双向起作用的胶水。它将来自 redux store 的数据连接到 react 道具，并将 react 回调（例如点击）连接到 redux 动作。

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

代码流应该如何工作：

我们使用 showMessage = false 创建一个初始存储
在创建 React 组件时，我们使用 connect 将 showMessage 绑定到一个 prop，并处理组件中按钮的 onClick 以生成一个 'BUTTON_PRESS'行动。
因为 showMessage 是 false，原来只有一个按钮。
用户按下按钮。 React 调用 onClick 处理程序
我们使用 redux-react 来调度一个 BUTTON_PRESS 事件
当 redux 获取一个动作时，它会使用当前状态和动作调用 reducer。 reducer 负责生成一个新的状态来响应这个动作
reducer 将 showMessage 设置为 true
redux-react 监听存储变化，当它发生变化时，它会修改 react 组件的 prop
prop 改变所以 react 调用 render()
1. 在您的渲染方法中，您看到 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

react/redux 的你好世界减速器

hello world reducer for react/redux

reducers

reactjs

redux