Javascript 迷失在迷雾中：redux/reactjs中的动作

我正试图在reactjs中实现操作的理论和实践上绞尽脑汁……我被卡住了！ 好的-让我们从我的简单应用程序测试应用程序的缩略图开始：

我正在创建一个简单的应用程序，它由一堆引导按钮组成

我有一个定义这些按钮属性的缩减器（下面的代码片段）：

我遍历存储并创建按钮作为组件。它工作得很好

return this.props.deviceElements.map((deviceElement) => {
    return (<div>....{stuff}......</div>)

现在谈谈我的问题：

我应该以这种方式管理应用程序还是应该使用操作…为什么

不管#1的答案是什么，我该怎么做。我已经尝试了定义动作、在reducer中设置动作处理程序以及在我的组件中触发它们（分派）的各种组合……但我既不了解引擎盖下面发生了什么，也不知道如何让代码工作。我会喜欢一个真实的例子（使用这个场景）来说明如何做到这一点

谢谢

+++++++++++++++++++++++++++++++++++++++++++++
在应用了下面建议的代码后（我不得不对其进行一些更改以使其正常工作）…我就在这里。

ui组件：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import {updateButtonStyle} from '../../actions/index';

---在我的构造函数中：

this.state = {
    activeStyle: this.props.deviceElement.activeStyle};

后来

function mapStateToProps(state){
    return {
        deviceElements: state.deviceElements,
        activeStyle: state.deviceElements.activeStyle
    }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    updateButtonStyle,
  }, dispatch);
};

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

要启动该操作（如果不传递某些内容，则根本无法使其工作！）：

操作/index.js

export const updateButtonStyle = (element) => {
  console.log("updateButtonStyle:")
  return {
    type: 'UPDATE_BUTTON_STYLE',
    payload: element
  }
};

最后，在我的减速机中：

export default function reducer(state = [], action) {
  switch (action.type) {
  case "UPDATE_BUTTON_STYLE":
  return [
      ...state
    {style: 'btn-success'}
    ]
  default:
    return state
  }
}

为了达到这一点，我尝试了几乎所有我能想到的组合。最后，当我按下按钮时，它确实会通过动作并触发组件刷新自己…但我无法获得任何刷新内容，当我查看道具时，我看到activeStyle未定义…当我查看state.activeStyle时，它没有更改

---

我敢肯定，我在整个流程中遗漏了一些东西

是的，使用Redux时，您绝对应该使用操作来更改状态，在这种情况下，

activeStyle

。Redux的目的是在一个地方维护应用程序状态，避免组件之间杂乱地传递道具和状态

通过Redux，您可以将动作和状态连接到应用程序，从而允许组件使用

this.props

访问动作和状态。当您调用

this.props.someaction

时，您的操作应该返回一个操作类型，该类型将在您的reducer中侦听。然后，减速器将更新组件状态

因此，在您的情况下，您希望创建一个操作，并从按钮的onPress事件调用它。您所做的所有操作都是让您的减速器知道您要进行的状态更改。可以这么简单：

function updateButtonStyle() {

  return {
    type: 'UPDATE_BUTTON_STYLE'
  }
}

然后在减速器中，实际状态发生变化：

initialState = {};
function reducer(state = initialState, action) {

  switch (action.type) {

      case UPDATE_BUTTON_STYLE:
        return {
          ...state,
          activeStyle: state.activeStyle == state.defaultStyle ? state.selectedStyle : state.defaultStyle
        }

      default:
        return state
      }
}

---

现在，假设您已经初始化了Redux存储并将其连接到组件，只需调用

this.props.updateButtonStyle（）

。Redux将为您更改状态。React/Redux需要一些时间来适应。一开始，它看起来非常复杂，不清楚所有的事情是如何进行的，但是经过一点练习，这是一种非常干净的方法来跟踪/更改应用程序的状态。

你不应该设置

this.state.activeStyle=this.props.deviceElement.activeStyle

。直接使用

this.props.deviceElement.activeStyle

。另外，您并没有在reducer中更改

activeStyle

，而是更改

style

，我看不到它在其他任何地方被定义或使用。谢谢。我删除了状态

activeStyle

，并且在我的渲染区域中，我正在使用

this.props.deviceElement.activeStyle

。

风格

是不同版本之间的一个打字错误！不管怎么说，似乎还没有恢复。当我在操作之后查看render函数时，我看到activeStyle是未定义的。我想是越来越近了。也许这就是我从减速器中返回的内容（或方式）？顺便说一下，在代码块中，您设置了state=initialState--什么是initialState？我猜它的伪代码是什么…但不知道是什么。您还建议activeStyle:！state.activeStyle---这是“设置你想要的”的伪代码吗？非常感谢你的鼓励和鼓励。非常感谢。您能在“UPDATE_BUTTON_STYLE”减速机外壳中添加

console.log（JSON.stringify（state））

吗？返回：

[{“activeStyle”：“btn success”，“labelText”：“try this”}]

（labelText只是我在尝试工作而已！）

export default function reducer(state = [], action) {
  switch (action.type) {
  case "UPDATE_BUTTON_STYLE":
  return [
      ...state
    {style: 'btn-success'}
    ]
  default:
    return state
  }
}

function updateButtonStyle() {

  return {
    type: 'UPDATE_BUTTON_STYLE'
  }
}

initialState = {};
function reducer(state = initialState, action) {

  switch (action.type) {

      case UPDATE_BUTTON_STYLE:
        return {
          ...state,
          activeStyle: state.activeStyle == state.defaultStyle ? state.selectedStyle : state.defaultStyle
        }

      default:
        return state
      }
}