如何使用父组件的redux store答案

【问题标题】：How to use redux store of parent component如何使用父组件的redux store
【发布时间】：2019-04-02 04:59:13
【问题描述】：

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

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

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

感谢您的帮助。

【问题讨论】：

我可以建议你两个选择：
使用 redux 的意义在于，您的所有状态都在一个存储中。你能把你的商店拉到一个单独的项目中并在所有项目中使用它吗？

标签： reactjs redux react-redux store redux-store

【解决方案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;
    }
};

从项目中导出这个 reducer： 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

【讨论】：

非常感谢。

【解决方案2】：

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

【讨论】：

如何将 store 传递给我的孩子，当我使用 ...