Javascript React Redux：获取道具并更新状态

我第一次尝试React/Redux/JS。我对在组件中设置状态和让redux更新状态有点困惑

我想单击一个按钮将lightOn设置为true，并更新this.props.lightOn值显示。我遗漏了一些基本的东西，但不确定是什么

行动：

export const setLight = lightStatus => dispatch => {
  const res = lightStatus;
  console.log(res); // => true on click

  dispatch({ type: SET_LIGHT, payload: res });
};

export const setLight = lightStatus => dispatch => {
  dispatch({ type: SET_LIGHT, payload: lightStatus });
};

在组件中，{this.props.onLight}未定义，因此我没有正确更新状态：

import React, { Component } from 'react';
import { connect } from 'react-redux';
//import * as actions from '../actions';
import { setLight } from '../actions';
import { bindActionCreators } from 'redux';

class Light extends Component {
  render() {

    return (
      <div>
        Light Status: {this.props.lightOn}
        <button
          className="btn"
          onClick={() => this.props.setLight(true)}
        >
          Set Light!
        </button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    lightOn: state.lightOn
  };
}

function mapDispatchToProps(dispatch) {
  //whenever selectBook is called the result should be passed to all of our reducers
  return bindActionCreators({ setLight: setLight }, dispatch);
}

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

---

将其设置为状态而不是直接传递给函数如何？首先在构造函数中绑定它，然后单击setState为true

constructor(props) {
super(props);
this.state:{lightOn: false};
this.OnClick = this.OnClick.bind(this);
}

onClick(event) {
this.setState({lightOn: true});
}

onClick ={this.onClick()}

当您使用redux时，可以通过返回一个新状态来实现

   return {...state, action.payload };

---

你不会在这里返回一个新的状态

export default function(state = [], action) {
  switch (action.type) {
    case SET_LIGHT:
      return action.payload;
    default:
      return state;
  }
}

您直接返回的是

action.payload

，即

lightStatus

这意味着您无法访问

MapStateTrops中的
state.lightOn

你应该做什么

 case SET_LIGHT:
              return {
                ...state,
                lightOn: action.payload,
              };

或者直接

case SET_LIGHT:
                  return {
                    ...state,
                    action.payload,
                  };

这样，整个状态不会丢失，也不会直接改变状态。
这里，为了简单起见，我使用了而不是。
减速器上的错误，减速器应该返回带有lightOn键的state对象，但是您返回有效负载值，这就是问题所在。
减速器应返回lightOn，有效载荷值如下所示

import { SET_LIGHT } from '../actions/types';

export default function(state = {}, action) {
  switch (action.type) {
    case SET_LIGHT:
      return {...state, action.payload}
    default:
      return state;
  }
}

它是如何工作的？
通过
connect
可以插入用于控制redux状态的道具，并将其绑定到组件。例如：

class SomeComponent extends React.Component {
    componentWillMount() {
        this.props.sendSomething('someName');
    }

    render() {
        return (
            <div>{this.props.stateProp}</div>
        )
    }
}

const mapStateToProps = state = ({
    stateProp: state.someReduxState,
});

const mapDispatchToProps = dispatch => ({
    sendSomething: (name) => dispatch(someActionCreator(name)),
});

const ConnectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps,
)(SomeComponent);

类SomeComponent扩展React.Component{
组件willmount（）{
this.props.sendSomething（'someName'）；
}
render（）{
返回(
{this.props.stateProp}
)
}
}
常量mapStateToProps=状态=({
stateProp:state.someReduxState，
});
const mapDispatchToProps=调度=>({
sendSomething：（name）=>dispatch（someActionCreator（name）），
});
const ConnectedComponent=connect(
MapStateTops，
mapDispatchToProps，
)（部分）；

在给定的示例中，您将
someReduxState
状态的一部分绑定到
stateProp
，并将其注入到组件中。您正在注入方法（
sendSomething
），该方法将在redux中调度和操作。若组件在显示部分redux状态时进行中继，那个么它将在每次redux状态更改时更新，因为注入组件的道具将更改。你可以在官方的Redux文档中找到更多信息，或者你可以在egghead上观看免费教程。
我现在用object设置的不是数组的状态。我猜我把lightOn对象放进了光阵列，这使得它无法访问

行动：

export const setLight = lightStatus => dispatch => {
  const res = lightStatus;
  console.log(res); // => true on click

  dispatch({ type: SET_LIGHT, payload: res });
};

export const setLight = lightStatus => dispatch => {
  dispatch({ type: SET_LIGHT, payload: lightStatus });
};

减速器：

import { SET_LIGHT } from '../actions/types';

export default function(state = { on: false }, action) {
  console.log('state ', state);
  switch (action.type) {
    case SET_LIGHT:
      return { ...state, on: action.payload };
    default:
      return state;
  }
}

组成部分：

import React, { Component } from 'react';
import { connect } from 'react-redux';
//import * as actions from '../actions';
import { setLight } from '../actions';
import { bindActionCreators } from 'redux';

class Light extends Component {
  render() {
    return (
      <div>
        Light On: {this.props.light.on.toString()}
        <button
          className="btn"
          onClick={() => this.props.setLight(!this.props.light.on)}
        >
          Set Light!
        </button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { light: state.light };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ setLight: setLight }, dispatch);
}

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
//将*作为动作从“../actions”导入；
从“../actions”导入{setLight}；
从“redux”导入{bindActionCreators}；
类灯光扩展组件{
render（）{
返回(
Light-On:{this.props.Light.On.toString（）}
this.props.setLight（！this.props.light.on）}
>
点燃！
);
}
}
函数MapStateTops（状态）{
返回{light:state.light}；
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{setLight:setLight}，dispatch）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（指示灯）；
什么？他正在使用redux。他不想用内部状态的方式来处理这个问题……我在我的reducer中添加了spread操作符，比如：return{……state，lightOn:action.payload}，但我仍然没有得到组件中this.props.lightOn的值