Redux mapStateToProps返回未定义

Question

Redux已成功存储和更新状态。 减速器似乎正常工作。 我可以使用this.props.dispatch 。 但是，当涉及到详细说明该信息时（即this.props.array我似乎总是变得不确定。

减速器：

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);

当我定义一个空数组时，这似乎只能保存状态btw。 这似乎不对，我认为Redux的初衷是一个独立的商店？ 更新变量似乎会破坏目标。

将不胜感激。

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，如果具有，则必须使用Combine reducer方法。因此在mapsStateToProps中访问state.array就像这样

  const mapStateToProps =（state）=> {return {

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

  }; };

• 代替“ reducer_name”，您必须指定您在组合减速器中定义的reducers_name

• 最后一个mapStateToProps返回数组，在props中不处于组件状态。 您可以通过{this.props.array}这样的方式进行访问，您不能在componentDidMount和componentWillRecieveProps中设置组件状态（如果aysnc操作）。

Answer 2

我不确定以下是您遇到的问题，但希望这些问题会有所帮助：

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

您的reducer应该是纯的，您已经在改变状态。

constructor(props) {
    super(props);
    this.state = {
      array: array // what is array?
    }
}

上面的构造函数是不对的。 您应该能够从this.props.array作为mapStateToProps访问该array

在render函数或ComponentWillReceiveProps执行console.log(this.props) ，看看是否可以console.log(this.props) :)

Answer 3

您的组件将在其props字段中将array作为字段接收。 您的代码假定它在state字段中。 所以代替：

this.state = {
      array: array
    }

您只需在代码中需要使用数组的任何地方访问this.props.array 。 您根本不需要将其置于本地状态。 通常，您可以在render函数中使用它，如以下示例所示：

render()
{
  return <div>The array contains {this.props.array.length} items.</div>
}

我想知道您是否将本地状态与Redux存储的状态混淆了？ 本地状态是您在组件代码中访问this.state时获得/设置的状态。 每个组件都可以有自己的状态对象，可以从中读取和写入数据。

Redux存储的状态是传递给mapStateToProps 的状态 。 它通常是顶级减速器中所有组合减速器的整个状态对象（尽管如果您只有一个减速器功能并且未使用combineReducers ，则存储状态与单个减速器的状态相同）。

我建议选择更具描述性的变量名称，以使您的代码更具可读性。 用这样的通用名称很难理解您对代码的意图。 例如，您可以为reducer命名以表示其用途，例如bookListReducer ，并命名要存储和检索其中将要包含的内容的数组，例如books 。 命名化简器和所有变量array将使阅读代码更加困难。 这将对以后阅读您的代码的所有人（包括最重要的是您！）以及将来的Stack Overflow读者（将来的问题（如果您对其进行编辑，也许也是这样））提供帮助。