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

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)

我遇到的问题是在 reducer 完成后，状态并没有像

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

我得到的状态是这样的：

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

上面的图像正是我运行代码时控制台打印出来的。对此的任何建议将不胜感激，因为我不知道我哪里出了问题。

提前致谢。

Answer 1

你实现的reducer比较复杂

请尝试以下。

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 state 和 combine reducer 的理解。

每个 reducer 只对它自己的状态部分负责，而且只对它自己的部分状态负责。

你有 2 个 reducer，posts 和 cat。当您使用组合减速器时，您正在定义它们负责的状态：

export default combineReducers({
  cats,
  posts
})

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

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

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

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

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

如果你想在 combine reducer 中亲自查看，请将代码更改为：

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

你会亲眼看到它。

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

how to add an object to an array in store

reducers

reactjs

redux