Question

我有这个容器和组件以及我试图放入商店的对象yeast。但是，每当我尝试保存它时，它都无法正常工作。该对象看起来像这样

{ yeastType : value, temp: value}

Container.js

const mapDispatchToProps = (dispatch) => {
    return {
        handleYeastChange: (yeast) => {
            dispatch(actions.updateYeast(yeast))
        }
    }
};

const RecipeYeastContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(RecipeYeast);

Component.js

updateYeastState = (updatedYeast) => {
    this.props.handleYeastChange(updatedYeast)
};

我在控制台或其他任何地方都没有错误。当我打开我的redux dev工具时，它告诉我状态在调用动作时已经更新。因此只保存输入到我的字段中的第一个字母。它永远不会坚持下去。它真的很奇怪。它也永远不会出现在用户界面中。我可以输入我想要的数量，并看到动作触发和保持第一个字母的状态，但它没有显示在输入中。

奇怪的是，当我更改代码以将yeastType和temp传递给属性函数并在其中构造对象时，它可以工作。（见下文）

这适用：Container.js

const mapDispatchToProps = (dispatch) => {
    return {
        handleYeastChange: (yeastType, temp) => {
            const yeast = {yeastType, temp}
            dispatch(actions.updateYeast(yeast))
        }
    }
};

Component.js

updateYeastState = (updatedYeast) => {
    this.props.handleYeastChange(updatedYeast.yeastType, updatedYeast.temp)
};

我无法弄清楚为什么会这样。我以为我可以直接通过对象而不必重建它。

Answer 1

您是否正确发送了action？在使用redux时，您没有更新组件的状态，而是更新store，然后组件中的值来自mapStateToProps函数，该函数来自store 1}}。假设您使用名为store商店的对象更新yourReducer。例如：

Container.js：

const mapStateToProps = (state) => ({
  inputValue: state.yourReducer.value
})
const mapDispatchToProps = (dispatch) => ({
  inputHandler: (e) => {
    dispatch(yourAction({type: 'CHANGE_INPUT', value: e.target.value}))
    // The store catches the action and pass to the reducer that can read the action's type
    // in `yourReducer` will catch the 'CHANGE_INPUT' type and
    // return a new value as same as the value that passed from the action
  }
})
export default connect(mapStateToProps)(Component)

Component.js

export default class Component extends React.Component {
  { your custom function here ... }

  render() {
    const { inputValue, inputHandler } = this.props
    return (
      <div>
        {/* The input will be the same as the inputValue changed */}
        <input value={inputValue} onChange={inputHandler} />
      </div>
    )
  }
}

对于调试redux，您可以尝试此redux-devtool。

Redux状态不使用javascript对象更新

1 个答案: