代码之家 › 专栏 › 技术社区 › hannad rehman

如何实施新的React Redux V6.0.0

react-context react-redux reactjs javascript

hannad rehman · 技术社区 · 6 年前

我想移民 react-redux v5.X.X 到 v6.0.0 而且似乎没有任何相关文件。我使用以下版本: "react": "^16.4.2" "redux": "^4.0.0" "react-redux": "^6.0.0"

官方的变更记录显示。

不再支持将存储作为属性传递给连接的组件。相反,您可以将自定义上下文=myContext prop传递给和。您还可以传递context:myContext作为连接选项。链接是 here

这是我的根 index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { configureStore, history } from './Store';
import App from './App.hot';

import 'antd/dist/antd.min.css';
const reduxStore = configureStore();
ReactDOM.render(<App store={reduxStore} history={history} />, document.getElementById('root'));

这是我的 app.jsx (根组件)

import React from 'react';
import PropTypes from 'prop-types';
import { Provider, connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ConnectedRouter } from 'connected-react-router';
import Layout from './Layout';

class App extends React.Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        // what i understand from change log is this part 
        // i need to pass context instead of store as props. 
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }
}


function mapStateToProps(store) {
  return {
    ...
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    ...
  }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

根据我创建的更改日志 context 然后传给供应商

 const storeContext = React.createContext(reduxStore);

这是我的 render 改变后的功能

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        <Provider context={storeContext}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }

经过 store 作为 props 到 provider 出现以下错误

传递Redux存储在Props中已被移除,不做任何操作。要对特定组件使用自定义Redux存储,请使用react.createContext()创建自定义React上下文,并传递Context对象以响应Redux的提供程序和特定组件,如:。您还可以传递一个context:MyContext选项来连接

作为传递 语境 出现以下错误

在“connect(app)”上下文中找不到“store”。要么将根组件包装在中,要么将自定义的react上下文提供程序传递给,并将相应的react上下文使用者传递给connect选项中的connect(app)。

除了这个Redux历史文档,我没有找到任何文档 here 它讲述了React Redux中的所有问题和解决方案,以及上下文API如何修复这些问题。但我不知道如何在实际的项目中实现它。

有人面临同样的问题吗?或者你能告诉我如何准确地实现这个改变吗?

谢谢

2 回复 | 直到 6 年前

hannad rehman 6 年前

我能够通过听错误消息的内容来解决这个问题。

我的代码有两个问题

我路过 store 作为我的支柱 <App /> 组件。这就是第一条警告/错误消息出现的原因。

传递Redux存储在Props中已被移除,不做任何操作。要对特定组件使用自定义Redux存储,请使用react.createContext()创建自定义React上下文,并传递Context对象以响应Redux的提供程序和特定组件,如:。您还可以传递一个context:MyContext选项来连接

要解决这个问题,就不要错过整个 redux store 作为任何组件的道具

我的 Provider 从 react-redux 不是根组件。错误消息说

在“connect(app)”上下文中找不到“store”。要么缠绕提供程序中的根组件,或将自定义响应上下文提供程序传递给和相应的响应上下文使用者连接(app) 连接选项

所以我跟着句子中的第二个减刑

要么在提供程序中包装根组件,要么传递自定义的react上下文

所以我把主要的根包在provider中。事情开始好转了。

ReactDOM.render(
  <Provider store={reduxStore}>
    <App />
  </Provider>, document.getElementById('root'),
);

Raunak Jain 6 年前

我也有同样的问题,这就是我解决它的方法。

const MyContext = React.createContext();

class App extends Component {
render() {
return (
<Provider store = {store} context={MyContext}>
  <BrowserRouter>
    <div>
      <Main context={MyContext}/>
    </div>
  </BrowserRouter>
</Provider>
);
}
}