javascript - Redux mapStateToProps 返回未定义

Question

Redux 正在成功存储和更新状态。 reducer 似乎工作正常。我可以使用 this.props.dispatch。然而，当实际涉及到详细信息时(即 this.props.array 我似乎总是未定义。

reducer :

export default function array(state = {}, action) {
    switch (action.type) {
      case "UPDATE_ARRAY":
        state.array = action.array
        return state;
      default:
        return state;
  }
}

状态感知组件:

  constructor(props) {
    super(props);
    this.state = {
      array: array
    }
  }

--

  self.props.dispatch({
    type: 'UPDATE_ARRAY',
    array: array
  })

--

const mapStateToProps = (state) => {
      return {
        messages: state.messages,
        array: state.array
      };
    };

    export default connect(mapStateToProps)(Component);

当我定义一个空数组时，这似乎只能保存状态。这似乎不对，我以为Redux的本意就是一个独立的store？更新变量似乎有点违背了目的。

非常感谢任何帮助。

Answer 1

export default function array(state = {}, action) {
switch (action.type) {
  case "UPDATE_ARRAY":state={
        ...state,
        array:action.array
                   }
    return state;
  default:
    return state;

}}

• 你应该总是不可变地更新你的状态，而不是改变当前的应用程序状态，你应该创建另一个对象并返回它。状态应该是不可变的，改变状态的唯一方法是创建一个新的。这有助于改进应用程序的性能。

• 我不确定您的应用程序是否有多个 reducer ，如果有，那么您必须使用组合 reducer 方法。因此，要访问mapsStateToProps中的state.array，就像这样

  const mapStateToProps = (状态) => { 返回{

  messages: state.{reducer_name}.message,
  array: state.{reducer_name}.array
  

  }；};

• 您必须指定您在组合 reducer 中定义的 reducer 名称来代替“reducer_name”

• 最后一个mapStateToProps返回数组，在props中而不是在组件状态中。您可以通过这种方式访问​​ {this.props.array}，您无法在 componentDidMount 和 componentWillRecieveProps 中设置组件状态(如果是 aysnc 操作)。