Question

我有以下代码段：

动作创作者：

export function addCategories(cats){
  return {
    type: ADD_CATEGORY,
    cats
  }
}

减速器：

function posts(state = {posts: []}, action) {
  switch (action.type) {
    case ADD_POST: {
      console.log(action.posts)
      return  {...state, posts: [...state['posts'], Object.assign({}, action.posts)]}
    }
    default:
      return state
  }
}

成分：

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { addCategories, addPosts } from './actions/index'

class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <button onClick={() => { this.props.cats({ name: "stra" }) }}>Add cat</button>
        <button onClick={() => { this.props.posts({ age: 23 }) }}>Add post</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state)
  return {
    state
  }
}

const mapDispatchToState = (dispatch) => {
  return {
    cats: (cat) => dispatch(addCategories(cat)),
    posts: (post) => dispatch(addPosts(post))
  }
}

export default connect(mapStateToProps, mapDispatchToState)(App)

我得到的问题是，在减速器完成后，而不是使状态看起来像

{
    // other values
    posts: [] <- values go where
}

我的州看起来像这样：

{
    // other values
    posts: {
        posts: []
    }
}

上面的图片就是我运行代码时控制台打印出的图像。对此我提出的任何建议都会非常感激，因为我不知道我哪里出错了。

提前致谢。

Answer 1

您实施的减速机非常复杂。

请在下面试试。

const initialState = {
  posts: [],
};

function posts(state = initialState, action) {
  switch (action.type) {
    case ADD_POST: {
      let newState = {posts: state.posts};
      newState.posts.push(...action.posts);

      console.log(action.posts)
      return Object.assign({}, state, newState);
    }
    default:
      return state
  }
}

更新

它是由reducer的名称posts引起的。你可以解决这个问题，只需将state与mapPropsToState分开就像

一样

function mapPropsToState(state) {
  return {
    posts: state.posts.posts,
    cats: state.cats.cats,
  }
}

将reducer的名称与reducer包含的变量名称相同是一个坏主意。

Answer 2

所以问题不在于代码，而在于你对redux状态的理解和减速器的组合。

会发生的情况是，每个减速器只对其自身的一部分负责，并且只对其自身的一部分负责。

你有2个减速器，帖子和猫。当您使用联合收割机减速器时，您将定义它们负责的状态：

export default combineReducers({
  cats,
  posts
})

所以现在你的redux商店看起来像这样：

state: {
  cats: {},
  posts: {},
}

并且每个状态属性都有自己的reducer，用于管理自己的状态。

所以在你的情况下，posts.posts是一个有效的redux状态。

可在此处找到更多信息：http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html

如果你想看到你的自我组合减速器改变代码：

export default combineReducers({
  cats,
  postsStore: posts
})

你会看到它为你自己。

如何将对象添加到存储中的数组

2 个答案: