React Redux在Modal中的使用
React Redux在Modal中的使用
提问于 2019-05-22 22:47:42
我正在学习React中的Redux。我在React中使用Redux进行Modal开发。我的代码如下所示
render() {
return (
<Modal id="addressModal" open={this.props.controlModal} onClose={this.props.action}>
<Provider store={store}>
{this.props.addresObj ? (
<Modal.Header>Address Details</Modal.Header>
) : (
<Modal.Header>Insert Address</Modal.Header>
)}
<Modal.Content>
<ModalElement
update={this.update}
element={this.props.addresObj}
errors = {this.state.errors}
update_state_photo={this.update_state_photo}
address={this.props.address}
action={this.props.action}
/>
</Modal.Content>
<Modal.Actions>
{this.props.addresObj ? (
<Button
positive
icon="checkmark"
labelPosition="right"
onClick={this.closeModal}
content="OK"
/>
) : (
<Button
positive
icon="checkmark"
labelPosition="right"
onClick={this.insertAddress}
content="Save"
/>
)}
</Modal.Actions>
</Provider>
</Modal>
);
}
}(我是否正确使用了<Provider store={store}> ?)在子组件中，我不能使用Redux语法。例如，如果我使用这个export default connect()(EditableRow);，我就会得到错误(组件的执行没有在那个组件上完成，执行等待)。如果我使用这个语法export default EditableRow;，我不会得到任何错误。
也许我不能恰当地表达我的问题。
这是我的repo https://github.com/afoysal/mern/blob/master/client/src/components/ModalBody.js
我的错误越来越小。
如何在React Modal中使用Redux？
回答 1
Stack Overflow用户
发布于 2019-05-31 16:52:13
我希望你没有把所有东西都包好，
一旦被包装，它就可以在整个应用程序中访问，
正如redux所说，必须有单一的真理来源，
一定要遵循原则。
// ModelBody.js
import { Provider, ReactReduxContext } from 'react-redux';
//...
render() {
return (
<ReactReduxContext.Consumer>
{((ctx) => (
<Provider store={ctx.store}>
<Modal id="addressModal" open={this.props.controlModal} onClose={this.props.action}>
/* make store available in Portal */
{this.props.addresObj ? (
<Modal.Header>Address Details</Modal.Header>
) : (
<Modal.Header>Insert Address</Modal.Header>
)}
/* other code from Model.js */
</Modal>
</Provider>
)).bind(this) // Dont forget to bind this
}
</ReactReduxContext.Consumer>或者尝试包装您的整个应用程序，index.jsx
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'
const store = createStore(rootReducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56259508
复制相关文章
相似问题