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;

和reducer：

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

减速器保持你的状态。因此，思考它的方式是＆＃34;我的程序的哪些部分可以改变？＆＃34;然后从那里开始，下一个问题是＆＃34;保持我的计划所需的最小状态是多少？＆＃34;

通过查看您的示例，我得到的印象是您正在尝试构建一个有时会显示＆＃34; hello world＆＃34;在UI中。让我进行一些互动，以帮助描述所有部分。

最初，我将帮助您创建一个具有空标签和按钮的程序。当您单击按钮时，它将显示＆＃34; hello world＆＃34;。

好的，那么回答第一个问题：什么可以改变？该应用程序可以显示＆＃34; hello world＆＃34;或无。我们可以通过几种不同的方式存储它。如果字符串是硬编码的，就像你上面提到的那样，那么你真的有一个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;
}

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

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

P.S。我通常会编写ES2015代码，因此commonJS导入语法中可能存在小的拼写错误

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

接下来的部分是redux-react。 Redux-react是反应中双向工作的粘合剂。它连接来自redux存储的数据以反应道具，并连接反应回调（例如点击）和redux操作。

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

要将其放入项目符号中，以下是代码流的工作方式：

我们使用showMessage = false
创建一个初始商店
在创建React组件时，我们使用connect将showMessage绑定到道具，并处理组件中按钮的onClick以生成＆＃39; BUTTON_PRESS＆＃39;动作。

由于showMessage为false，因此最初只有一个按钮。

用户按下按钮。 React调用onClick处理程序

我们使用redux-react来调度BUTTON_PRESS事件

当redux获取操作时，它会使用当前状态和操作调用reducer。减速器负责响应此操作生成新状态

reducer将showMessage设置为true

redux-react监听存储更改，当它发生更改时，它会修改反应组件的prop

道具改变所以反应调用render（）

在您的渲染方法中，您会看到this.props.showMessage为true，因此您显示该消息。

以下是如何实施这样的反应组件。 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

hello world reducer for react / redux

1 个答案: