redux 상태를 적절하게 관리하는 방법은 무엇입니까?

Question

특별한 경우에 REDUX 상태를 관리하기위한 내가 가장 좋은 연습 방법을 찾고 있어요 : 나는 콘텐츠 편집기로 편집 게시물에 대한 응용 프로그램을

는 응용 프로그램 상태는 다음과 같습니다

{ 
    posts: [ 
    { 
     id: 123, 
     blocks: [ 
     { 
      setting1: 'fuzz', 
      setting2: 'bar', 
      ... 
     } 
     ], 
     ... 
    }, 
    ... 
    ], 

    activeBlock: { 
    setting1: 'fuzz', 
    setting2: 'bar', 
    ... 
    } 
} 

그것은 사실입니다 내가 가고 싶은 국가의 구조. 나는 다음과 같은 구조를 가지고이 때

:

{ 
    posts: [ 
    { 
     id: 123, 
     activeBlockIndex: 0, 
     blocks: [ 
     { 
      setting1: 'fuzz', 
      setting2: 'bar', 
      ... 
     } 
     ], 
     ... 
    }, 
    ... 
    ] 
} 

그리고 나는 게시물 및 콘텐츠 블록에 대한 하나의 공통 감속기 있습니다. 그리고 Content Editor 구성 요소가 매우 복잡하고 많은 요소가 하위 구성 요소로 깊숙이 들어가 있습니다. 괜찮아 보이고 작동하는 것 같습니다. 하지만 문제가 있습니다. 게시물에 대한 많은 정보를 Content Editor의 구성 요소 (예 : postId, blockIndex)에 지정해야합니다. 나는 그것이 좋지 않다고 생각한다. 왜냐하면 콘텐츠가 어디에 저장 되더라도 내용을 편집하는 것의 주된 책임이기 때문이다.

Content Editor의 구성 요소에는 state.activeBlock 및 게시물 관리를위한 기타 구성 요소 및 state.posts의 경우에만 참조가 포함될 수 있도록 내 앱을 리팩터링하려고합니다. (질문에 구조의 첫 번째 변종)

다른 말로하면, 환원 레벨 (또는 다른 곳에서는 모르겠다)에서 state.posts으로 상태의 state.activeBlock 분기를 찾을 수있는 방법을 찾고 있습니다.

정말 감사드립니다.

Btw, 내가 말하고자하는 것이 분명할까요? 또는 질문을보다 자세하게 다시 작성해야합니까?

Answer 1

정확히 무엇을 묻고 있는지 잘 모르겠지만 예제마다 상태의 여러 "영역"이 필요하면 combineReducers을 사용할 수 있습니다. mapStateToProps에서 예 store.js

import thunkMiddleware from 'redux-thunk' 
import { createStore, combineReducers, applyMiddleware } from 'redux' 

import postsReducer from './reducers/postsReducer' 
import activeBlockReducer from './reducers/activeBlockReducer' 

const reducers = { 
    posts: postsReducer, 
    activeBlock: activeBlockReducer 
} 

const reducer = combineReducers(reducers) 
const store = createStore(
    reducer, 
    applyMiddleware(
     thunkMiddleware 
    ) 
) 

export default store 

당신은 당신의 구성 요소에 연결 state.posts[0] 및 state.activeBlock.setting1를 사용할 수 있습니다.