如何使用 parent 组件的 redux store

Question

我正在创建一个组件 (- child)，类似于 npm package（- 另一个项目）。该组件将在另一个组件中使用 (- parent)（将像 npm i child 一样安装）。

所以，我的问题是我想在 child 中使用 redux 存储架构。在parent中，有一个过于redux的store架构。在 child 中，我不想使用自己的商店 我想使用 parent 组件 的商店。我怎样才能做到这一点？如何在 child 中使用 parent 组件的存储？

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

感谢您的帮助。

Answer 1

我可以给你两个建议：
1) 为您的 child 组件制作一个减速器，并将其传递给减速器配置中的 combineReducer。然后你就可以访问全球商店了。
2) 或者你可以简单地传递你的 child 从 parent 组件消耗的任何东西作为道具。

Answer 2

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

我更喜欢结合减速器的方式。

在您的 child 应用中创建一些减速器：

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';

现在，在 parent 根减速器中结合这个减速器：

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,
})

那么，就这些了，现在您可以在 child 中使用 connect、mapStateToProps、dispatchToProps 等...。

您也可以阅读 parent state store..

Parent 商店看起来像这样：

app: { ... }         // <-- parent
YourReducer: { ... } // <-- your child

如何使用 parent 组件的 redux store

How to use redux store of parent component

store

reactjs

redux

react-redux

redux-store