방법 저장

Question

에 배열에 객체를 추가하는 I가 다음 코드 조각 :

행동 작성자 :

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: { 
     posts: [] 
    } 
} 

은 위의 이미지는 어떤 콘솔 인쇄 밖으로 : 따고 감속기 대신 난 상태가이처럼 보이는 얻을

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

처럼 보이는 상태를 얻는 이루어집니다 내가 코드를 실행할 때. 이 점에 대한 조언은 내가 잘못 된 부분을 잘 모르기 때문에 크게 감사하겠습니다.

미리 감사드립니다.

Answer 1

그래서 문제는 코드가 아니라 redux 상태를 이해하고 reducers를 결합합니다.

각 감속기는 상태의 자체 부분에만 책임이 있으며 상태의 자체 부분에 대해서만 책임이 있습니다.

귀하는 2 개의 감속기, 기둥 및 고양이가 있습니다. 당신이 상태를 정의하는 감속기를 결합하여 사용하는 경우가 책임이 있습니다 : 그,

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

하고 거기에 자신의 감속기가 이러한 상태의 각 속성 :

export default combineReducers({ 
    cats, 
    posts 
}) 

그래서 지금 REDUX 저장소는 다음과 같습니다 그 자신의 상태를 관리하십시오.

귀하의 경우 posts.posts는 유효한 redux 상태입니다.

자세한 내용은 여기에서 찾을 수 있습니다 :

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

을 당신이 당신 자신을 위해 그것을 볼 수 있습니다 : 감속기가 될 코드를 변경 결합에 http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html

당신이 그것에게 당신의 자신을보고 싶어합니다.

Answer 2

구현하는 감속기는 상당히 복잡합니다.

아래를 시도하십시오. 그것은 감속기의 이름 posts에 의해 발생

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. 이 단순히 감속기에 포함 된 변수의 이름으로 감속기의 이름이 동일하게 나쁜 생각 mapPropsToState

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

처럼에 state을 분할 해결할 수 있습니다.