多个redux

60 阅读1分钟

1、以往项目比较单一,只会有一个store;
提供方写法:

<Provider store={store}>{children}</Provider>

接收方写法:

const Component = ({count})=> <h1>{count}</h1>
const mapStateToProps = state =>{
    return {
        count: state.count
    }
}
connect(mapStateToProps)(Component)

2、当项目中有多个store时,

    按照下面写法只能获取到最近的store里的信息,其余的store都会被屏蔽;
    提供方写法:
    <Provider store={store}>
        <Provider store={store1}>
            {children}
        </Provider>
    </Provider>
    
    接收方写法:
    const Component = ({count})=> <h1>{count}</h1>
    const mapStateToProps = state =>{
        return {
            count: state.count
        }
    }
    connect(mapStateToProps)(Component)
  • react-redux 5.1.2 指定storeKey,便可以获取相应的store,默认值 store 提供方:
const Provider1 = createProvider('null')
<Provider store={store}>
    <Provider1 store={store1} context={Store1Context}>
        <>
            <h1>count</h1>
            <App />
            <Button/>
        </>
        <hr/>
        <>
            <h1>name</h1>
            <Name />
            <Input/>
        </>
    </Provider1>
</Provider>

接收方:

const App = props =>{
    return <h1>{props.name}</h1>
}
const mapStateToProps = state=>{
    return {
        name: state
    }
}

export default connect(mapStateToProps, null, null, {
    storeKey: 'null'
})(App);