Как использовать избыточный магазин родительского компонента - PullRequest
Новая
       45

Как использовать избыточный магазин родительского компонента

0 голосов
/ 29 октября 2018

Я создаю компонент (- дочерний), как npm package (- другой проект). Этот компонент будет использоваться в другом компоненте (- parent) (будет установлен как npm i child).

Итак, моя проблема в том, что я хочу использовать архитектуру избыточного хранилища у ребенка. У родителя слишком избыточная архитектура хранилища. В детстве я не хочу использовать собственное хранилище Я хочу использовать хранилище родительского компонента . Как я могу это сделать? Как я могу использовать хранилище родительского компонента в моем ребенке?

Это возможно? Я понятия не имею, как это сделать.

Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Я думаю, что есть еще один способ сделать это.

Я предпочитаю использовать комбинированные редукторы.

В вашем дочернем приложении создайте какой-нибудь редуктор: 

import {ACTIONS} from './actions';

const defaultState = {
    counter: 0,
};

export default function(state = defaultState, action) {
    switch (action.type) {
        case ACTIONS.PLUS:
            let newState = {...state};
            newState.counter++;
            return newState;
        case ACTIONS.MINUS:
            let newState2 = {...state};
            newState2.counter--;
            return newState2;
        default:
            return state;
    }
};

Экспорт этого редуктора из проекта: export {default as YourReducer} from './your-reducer';

Теперь в родительском корневом редукторе объедините этот редуктор: 

import {combineReducers} from 'redux'

import app from 'app/containers/app/app-reducer'
import {YourReducer} from '@this-is-your-package/YourReducer'

export default combineReducers({
    app,
    YourReducer,
})

Итак, все, теперь вы можете использовать connect, mapStateToProps, dispatchToProps и т. Д. ... у вашего ребенка.

Вы также можете прочитать родительское хранилище состояний ..

Родительский магазин выглядит так: 

app: { ... }         // <-- parent
YourReducer: { ... } // <-- your child
0 голосов
/ 29 октября 2018

Я могу предложить вам два варианта:
1) Создайте редуктор вашего дочернего компонента и передайте его combineReducer в вашей конфигурации редуктора. Тогда у вас будет доступ к глобальному магазину.
2) Или вы можете просто передать все, что ваш ребенок потребляет из родительского компонента, в качестве реквизита.

...