모듈 내부에있는 여러 감속기를 관리하기위한 패턴 [Redux]

Question

저는 Redux를 처음 사용하며 프로젝트 폴더/파일 구조를 확장하는 방법을 이해하려고합니다. 는 'rootReducer.js'파일이 사는 프로젝트의 루트에서

루트/모듈/왜 그렇게/감속기

:

우리는 다음과 같습니다 파일 구조를 가지고 말할 수 있습니다 각 모듈에 대한 '감속기'폴더의 내부

[rootReducer.js] 

import { combineReducers } from 'redux'; 

import todos from './modules/Todos/reducers/index.js'; 

export default combineReducers({ 
    todos: todos 
}); 

다수가있다 : 상태 트리의 최상위 구현을 만들 수있는 활용 'combineReducers() 감속기 :

[index.js] 

import { combineReducers } from 'redux'; 

import addItem from './Todos__addItem.js'; 
import removeItem from './Todos__removeItem.js'; 

export default const todos = combineReducers({ 
    addItem: addItem, 
    removeItem: removeItem 
}); 

이가 'combineReducers()'의 올바른 사용하는 것입니다 :

[root/modules/Todos/reducers] 

>index.js 
>Todos__addItem 
>Todos__removeItem 

'하는 index.js'파일 가져 오기 해당 모듈에 대한 감속기의 모든과가 하나의 객체를 수출?

대규모 응용 프로그램을 개발할 때이 패턴이 맞습니까?

이 패턴과 함께 나타나는 잠재적 함정은 무엇입니까?

감사합니다.

Answer 1

확실히 올바른 사용법은 combineReducers입니다. combineReducers은 특정 상태 조각을 지정된 함수로 위임하는 데 사용됩니다. 예를 들어 실제로 수행 할 작업이 디스패치 된 작업에 따라 다른 방식으로 해당 기능을 사용하여 동일한 todos 상태 슬라이스를 업데이트하는 경우 실제로 addItem 및 removeItem이라는 상태 조각을 만듭니다.

"구조 조정기"라는 주제로 Redux 문서의 새로운 섹션을 작성하고 있습니다. 현재 WIP 초안을 읽을 수도 있습니다 - 일부는 도움이 될 수 있습니다. 초안은 https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md에 있습니다. 몇 가지 예가 귀하의 질문과 관련이 있어야합니다.

Answer 2

예 https://github.com/suin/redux-multiple-reducers-example

import {counter1, counter2 } from "../../reducers/index" 
import CounterApp from "../containers/CounterApp"; 


const rootReducer = combineReducers({ 
    one:counter1 , 
    two:counter2 
}); 

const store = createStore(rootReducer); 

class App extends React.Component{ 
    render() { 
    return (
     <Provider store={store}> 
      <CounterApp /> 
     </Provider> 
    ); 
    } 

카운터 1보기

import * as counter1Actions from "../../actions/counter1Actions"; 

@connect(state => ({ 
    counter1: state.one 
})) 
export default class Counter1 extends React.Component{ 

    static propTypes = { 
    counter1: PropTypes.number.isRequired 
    } 

    componentDidMount() { 
    console.info("counter1 component did mount."); 
    } 

    onClick() { 
    console.info("counter1 button was clicked."); 
    const action = bindActionCreators(counter1Actions, this.props.dispatch); 
    action.increment(); 
    } 

    render() { 
    return (
     <div> 
     <h1>Counter 1</h1> 
     <button onClick={::this.onClick}>increment</button> 
     <div>Total: <span>{this.props.counter1}</span></div> 
     </div> 
    ); 
    } 
} 

COUNTER2 뷰에서

import * as counter2Actions from "../../actions/counter2Actions"; 

@connect(state => ({ 
    counter2: state.two 
})) 
export default class Counter2 extends React.Component { 
    static propTypes = { 
    counter2: PropTypes.number.isRequired 
    } 

    componentDidMount() { 
    console.info("counter2 component did mount."); 
    } 

    onClick() { 
    console.info("counter2 button was clicked."); 
    const action = bindActionCreators(counter2Actions, this.props.dispatch); 
    action.increment(); 
    } 

    render() { 
    return (
     <div> 
     <h1>Counter 2</h1> 
     <button onClick={::this.onClick}>increment</button> 
     <div>Total: <span>{this.props.counter2}</span></div> 
     </div> 
    ); 
    } 
} 

CounterApp

,

import Counter1 from "../components/Counter1"; 
import Counter2 from "../components/Counter2"; 

class CounterApp extends React.Component{ 
    render() { 
    return (
     <div> 
     <Counter1/> 
     <Counter2/> 
     </div> 
    ); 
    } 
} 

감속기

export default function counter1(state = initialState, event) { 
    switch (event.type) { 
    case "COUNTER1_INCREMENTED": 
     console.info(`counter1 ack ${event.type}: event =`, event); 
     return state + 1; 
    default: 
     console.warn("counter1 ack unknown event: state =", state, "event =", event); 
     return state; 
    } 

export default function counter2(state: Object = initialState, event: Object): Object { 
    switch (event.type) { 
    case "COUNTER2_INCREMENTED": 
     console.info(`counter2 ack ${event.type}: event =`, event); 
     return state + 1; 
    default: 
     console.warn("counter2 ack unknown event: state =", state, "event =", event); 
     return state; 
    } 
}