Question

我正在创建类似npm package的组件（-子项）（-另一个项目）。该组件将通过另一个组件（-父组件）使用（将像npm i child一样安装）。

所以，我的问题是我想在孩子中使用redux存储体系结构。在父级中，过于繁琐的存储体系结构。在孩子中，我不想使用自己的商店我想使用父组件的商店。我怎样才能做到这一点？如何在孩子中使用父组件的存储？

有可能吗？我不知道该怎么做。

谢谢您的帮助。

Answer 1

我认为还有更多的方法可以做到这一点。

我更喜欢使用联合减速器。

在您的子应用程序中创建一些减速器：

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

Answer 2

我可以建议您两个选择：
1）创建子组件的化简器，并将其传递给化简器配置中的combineReducer。然后您将可以访问全球商店。
2）或者，您也可以简单地将孩子从父级组件消耗的任何东西作为道具传递。

如何使用父组件的Redux存储

2 个答案: