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;

} }

你应该总是不可改变地改变你的状态，而不是改变当前的应用程序状态，你应该创建另一个对象并返回它.State应该是不可变的，只有改变状态的方法是创建一个新的。这有助于改进应用程序的性能。
我不确定你的应用程序是否有多个reducer，如果有的话，你必须使用combine reducer方法。所以在mapsStateToProps中访问state.array是这样的

const mapStateToProps =（state）=＆gt; { 返回{
```
messages: state.{reducer_name}.message,
array: state.{reducer_name}.array
```
}; };
代替'reducer_name'，你必须指定你在combine reducer中定义的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;
  }
}

你的减速器应该是纯净的，你所拥有的是改变状态。

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

上面的构造函数不对。您应该可以array作为this.props.array

从mapStateToProps访问console.log(this.props)

在render函数或ComponentWillReceiveProps中执行{{1}}，看看是否可以：•

Answer 3

您的组件将在其array字段中收到props字段。您的代码假定它位于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的内容。它通常是顶级reducer中所有组合Reducer的整个状态对象（虽然如果你只有一个reducer函数而且没有使用combineReducers，那么存储状态与单个reducer相同＆＃39; s州）。

我建议选择更多描述性变量名称，以便您的代码更具可读性。很难理解您对具有此类通用名称的代码的意图。例如，您可以将缩减器命名为指示它的用途，例如bookListReducer，并命名要存储和检索的数组，例如books。命名您的reducer和所有变量array会使您更难阅读代码。这将有助于将来读取您的代码的任何人 - 包括，最重要的是，您！以及未来Stack Overflow读者的未来问题（如果您编辑它，也可能是这个）。

Redux mapStateToProps返回undefined

3 个答案: