如何將對象添加到一個陣列中的存儲

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

所以這個問題不是代碼，而是你對redux狀態的理解和結合reducer。

會發生什麼情況是每個reducer只負責它自己的狀態部分，並且只是它自己的狀態部分。

你有2個reducer，職位和貓。當您使用結合您所定義的狀態減速，他們的職責是：

export default combineReducers({ 
    cats, 
    posts 
}) 

所以現在你的終極版店是這樣的：

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

和這些國有財產，有自己的減速器，即管理自己的國家。

所以在你的情況posts.posts是一個有效的redux狀態。

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

，如果你想看到你的自我在結合減速器更改代碼是：

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

，你會看到它爲你的自我。

Answer 2

你實現的減速機相當複雜。

請在下面嘗試。

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 
    } 
} 

UPDATE

它是由減速器的名字posts造成的。你可以解決這個問題只需mapPropsToState像

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

這是一個壞主意，使減速機的名稱相同，減速機包含變量的名稱劃分state。